Components
djust provides 40+ ready-to-use UI components with both stateless and stateful variants.
Component Types
| Type | Count | Use Case | Description |
|---|---|---|---|
| Stateless (Component) | 28 | Display content, no internal state | High-performance display components. Use for static content. |
| Stateful (LiveComponent) | 12 | Interactive, maintains own state | Interactive components with lifecycle. Use when component needs its own state. |
Component Categories
Form Controls (8 components)
Available components: Input, TextArea, Select, Checkbox, Radio, Switch, Range, FileInput
Display (9 components)
Available components: Alert, Badge, Card, Avatar, Progress, Spinner, Divider, Icon, Breadcrumb
Interactive (11 components)
Available components: Button, ButtonGroup, Dropdown, Modal, Tabs, Pagination, Table, Toast, Tooltip, NavBar, Accordion
Component Examples
Input
from djust.components import Input
input_field = Input(
name='email',
type='email',
placeholder='Enter email',
value=form.email.value,
error=field_errors.get('email'),
)
Alert
from djust.components import Alert
alert = Alert(
message='Success!',
variant='success', # primary, success, danger, warning, info
dismissible=True,
)
Button
from djust.components import Button
button = Button(
text='Save',
variant='primary',
size='lg',
loading=is_saving,
icon='check',
)
Card
from djust.components import Card
card = Card(
title='Product Name',
body='Product description...',
footer='$99.99',
image_url='/static/product.jpg',
)
CSS Framework Support
Components automatically adapt to your configured CSS framework:
# settings.py
LIVEVIEW_CONFIG = {
'css_framework': 'bootstrap5', # or 'tailwind', or None
}
| Framework | Button Class | Input Class | Alert Class |
|---|---|---|---|
| Bootstrap 5 | btn btn-primary | form-control | alert alert-success |
| Tailwind | px-4 py-2 bg-blue-500... | border rounded px-3... | p-4 bg-green-100... |
Creating Custom Components
Stateless Component
from djust import Component
class Badge(Component):
template_name = 'components/badge.html'
def __init__(self, text, variant='primary', **kwargs):
super().__init__(**kwargs)
self.text = text
self.variant = variant
def get_context_data(self):
return {'text': self.text, 'variant': self.variant}
Stateful LiveComponent
from djust import LiveComponent
class Counter(LiveComponent):
template_name = 'components/counter.html'
def mount(self, initial=0, **props):
self.count = initial
def increment(self):
self.count += 1
self.send_parent('count_changed', count=self.count)
Next Steps
- State Management - Managing component state
- Forms - Form integration
- API Reference - Complete component API