Components Showcase

31 djust-components — live interactivity via WebSocket

← Back to Home

1. Modal

Backdrop dialog. Server state controls open/close.

2. Tabs

Active tab tracked in server state.

WebSocket reactivity — active tab: overview

No JavaScript needed. State lives on the server.

<nav class="tabs-nav">
  <button dj-click="switch_tab" data-value="a" class="tabs-trigger">A</button>
</nav>

3. Accordion

One panel open at a time.

A hybrid Python/Rust framework bringing LiveView-style reactivity to Django — no build step.

4. Dropdown

Server-toggled menu. Selected: none

5. Toast

Dismissable notification stack.

✓ Changes saved successfully.
ℹ New version available.

6. Tooltip

CSS-only hover tooltips — no JS.

Shows on top
Shows below
Shows left
Shows right

7. Progress

Live value: 65%

Upload 65%
Storage 40%
CPU 90%

8. Badge

Status indicators with pulse animation.

Online Offline Warning Error Info Default
3 notifications

9. Card

Card variants from djust-components.

Default Card Standard border and background
Card body content.
Elevated Card With box-shadow
Elevated variant content.

10. Data Table

Sortable columns, server-side state. Click a header to sort.

Name ▲ Role Status
Alice Johnson Admin Active
Bob Smith Editor Active
Carol White Viewer Inactive
Dave Brown Editor Active
Page 1 of 3

11. Pagination

Page 3 of 8

12. Avatar

Initials or image, with status indicator.

AJ
BS
CW
DB
?

Sizes: xl · lg · md · sm · xs  ·  Statuses: online · busy · away · offline

Tier 1 New Components

13. Alert / Banner

ℹ
Information
This is an informational alert.
✓
Operation completed successfully.
⚠
Warning
Please review before continuing.
✕
Something went wrong.

14. Button

15. Input Field

This field is required.

16. Select

17–18. Checkbox & Radio

19. Textarea

Max 500 characters.

20. Spinner


sm

md

lg

muted

21. Skeleton

22. Breadcrumb

23. Empty State

🔍

No results found

Try adjusting your search or filters.

24. Divider

or continue with
Section Break

25. Switch / Toggle

26. Stat / KPI Card

Total Users
12,483
↑ +8.2%

vs last month

Revenue
$94,200
↑ +12.5%

vs last month

Churn Rate
2.1%
↓ +0.3%

vs last month

Avg Session
4m 32s
— —

no change

27. Tag / Chip

Default Primary Success Warning Danger Info Small

28. Timeline

Account createdJan 5, 2025
Signed up and verified email address.
First deployJan 12, 2025
Deployed first application to production.
Team inviteFeb 3, 2025
Invited 3 team members to the workspace.

29. Stepper

1
Account
2
Profile
3
Billing
4
Confirm

30. Form Group

Wrap any input in a form-group.
This value is invalid.