Home Features Docs Blog Security Examples Quick Start
Get Started GitHub

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: [List]

Display (9 components)

Available components: [List]

Interactive (11 components)

Available components: [List]

Component Examples

Input

fromdjust.componentsimport Input

input_field = Input(
    name='email',
    type='email',
    placeholder='Enter email',
    value=form.email.value,
    error=field_errors.get('email'),
)

Alert

fromdjust.componentsimport Alert

alert = Alert(
    message='Success!',
    variant='success',  # primary, success, danger, warning, info
    dismissible=True,
)

Button

fromdjust.componentsimport Button

button = Button(
    text='Save',
    variant='primary',
    size='lg',
    loading=is_saving,
    icon='check',
)

Card

fromdjust.componentsimport 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

fromdjustimport Component

classBadge(Component):
    template_name = 'components/badge.html'

    def__init__(self, text, variant='primary', **kwargs):
        super().__init__(**kwargs)
        self.text = text
        self.variant = variant

    defget_context_data(self):
        return {'text': self.text, 'variant': self.variant}

Stateful LiveComponent

fromdjustimport LiveComponent

classCounter(LiveComponent):
    template_name = 'components/counter.html'

    defmount(self, initial=0, **props):
        self.count = initial

    defincrement(self):
        self.count += 1
        self.send_parent('count_changed', count=self.count)

Next Steps