Explore all djust components with live, interactive examples. All components support Bootstrap 5, Tailwind CSS, and plain HTML rendering.
Core interactive components for building modern user interfaces
This is a simple card component with a title and body text.
Components for organizing and structuring your application layout
Welcome to the Home tab!
This content is loaded immediately.
User profile information goes here.
Your messages appear here.
Configure your settings.
Components for displaying and manipulating data tables and lists
| ID | Name | Role | Status | |
|---|---|---|---|---|
| 1 | Alice Johnson | alice@example.com | Admin | active |
| 2 | Bob Smith | bob@example.com | User | active |
| 3 | Charlie Brown | charlie@example.com | User | inactive |
| 4 | Diana Prince | diana@example.com | Moderator | active |
| 5 | Eve Wilson | eve@example.com | User | active |
Complete code examples showing how to use djust components
from djust import LiveView
class CounterView(LiveView):
template_name = "counter.html"
def mount(self, request, **kwargs):
self.count = 0
def increment(self):
self.count += 1
def decrement(self):
self.count -= 1<div data-liveview-root>
<h1>Count: {{ count }}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="/static/djust/client.js"></script>from djust import LiveView
class FormView(LiveView):
template_name = "form.html"
def mount(self, request, **kwargs):
self.email = ""
self.error = ""
def validate_email(self, value=""):
self.email = value
if "@" not in value:
self.error = "Invalid email"
else:
self.error = ""from django.urls import path
from .views import CounterView
urlpatterns = [
path('counter/', CounterView.as_view(), name='counter'),
]Works with Bootstrap 5, Tailwind CSS, or plain HTML/CSS
All components rendered server-side using Rust for maximum performance
Instant reactivity via WebSocket with minimal DOM updates