Component reference

Jump to a component using the alphabetical index. Descriptions, signatures, defaults, events and accessibility rules come from the same registry the live catalogue renders, so the two cannot disagree.

Every entry links to its page on djust.org, where the component is running: flip its options, copy the two files you would write, and read its props against the version deployed there. This page is built from the djust checkout this documentation pins, so the two can differ.

For composition and event handling, start with the components guide. For custom component base classes, see Components API.

Using them

A component's constructor arguments are its state, and writing one re-renders:

from djust.components import Rating

def mount(self, request, **kwargs):
    self.rating = Rating(value=4, max_stars=5)

@event_handler()
def set_rating(self, value, **kwargs):
    self.rating.value = value

Render it in your Django template:

{{ rating }}

Alphabetical index

A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · V · W

NOT_SUPPLIED means omit the argument to use the component's default behaviour.

A

Accordion

Accordion/collapsible sections component.

python · Core UI · from djust.components import Accordion · Open it live

Accordion(items=None, active='', event='accordion_toggle', custom_class='', **kwargs)

Events sent to your view: accordion_toggle. Give the component a name when a page holds more than one; the handler receives it as name.

Activity Feed

Real-time activity feed with streaming support.

python · Data Display · from djust.components import ActivityFeed · Open it live

ActivityFeed(events=None, stream_event='', max_items=50, custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="ActivityFeed". The markup renders, but the interaction is yours to add — register window.djust.hooks.ActivityFeed (see hooks).

Agent Step

AI agent tool-use step card.

python · Feedback · from djust.components import AgentStep · Open it live

AgentStep(tool='', status='pending', content='', duration='', custom_class='', **kwargs)

Alert

Style-agnostic alert component using CSS custom properties.

template · Core UI · Open it live

{% theme_alert message=... title=... variant=... dismissible=... css_prefix=... attrs=... %}

Or as a Python component — from djust.components import Alert:

Alert(message, variant='info', dismissible=False, action=None, icon=None, custom_class='', **kwargs)

Slots: slot_icon, slot_message, slot_actions, slot_dismiss

Accessibility: Alert container must have role=alert.

Animated Number

Animated counting number display.

python · Advanced · from djust.components import AnimatedNumber · Open it live

AnimatedNumber(value=0, prefix='', suffix='', duration=800, decimals=0, separator=',', custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="AnimatedNumber". The markup renders, but the interaction is yours to add — register window.djust.hooks.AnimatedNumber (see hooks).

Announcement Bar

Announcement/banner bar component.

python · Advanced · from djust.components import AnnouncementBar · Open it live

AnnouncementBar(content='', variant='info', dismissible=False, dismiss_event='dismiss_announcement', custom_class='', **kwargs)

Events sent to your view: dismiss_announcement. Give the component a name when a page holds more than one; the handler receives it as name.

App Shell

Application shell layout component.

python · Layout · from djust.components import AppShell · Open it live

AppShell(sidebar='', header='', content='', variant='default', custom_class='', **kwargs)

Approval Gate

Inline confirmation card for AI agent actions with risk levels.

python · Feedback · from djust.components import ApprovalGate · Open it live

ApprovalGate(message='', risk='medium', approve_event='approve', reject_event='reject', approve_label='Approve', reject_label='Reject', custom_class='', **kwargs)

Events sent to your view: reject, approve. Give the component a name when a page holds more than one; the handler receives it as name.

Aspect Ratio

Aspect ratio container component.

python · Media · from djust.components import AspectRatio · Open it live

AspectRatio(content='', ratio='16/9', custom_class='', **kwargs)

Audit Log

Style-agnostic audit log table component.

python · Data Display · from djust.components import AuditLog · Open it live

AuditLog(entries=None, stream_event='', columns=None, allowed_actions=None, custom_class='', **kwargs)

Avatar

Avatar component with optional status indicator.

template · Core UI · Open it live

{% theme_avatar src=... alt=... name=... size=... css_prefix=... attrs=... %}

Or as a Python component — from djust.components import Avatar:

Avatar(src='', alt='', initials='', size='md', status='', custom_class='', **kwargs)

Slots: slot_image, slot_fallback

Avatar Group

Style-agnostic avatar group using CSS custom properties.

python · Media · from djust.components import AvatarGroup · Open it live

AvatarGroup(users=None, max_display=5, size='md', custom_class='', **kwargs)

B

Badge

Style-agnostic badge component using CSS custom properties.

template · Core UI · Open it live

{% theme_badge text=... variant=... css_prefix=... attrs=... slot_content=... %}

Or as a Python component — from djust.components import Badge:

Badge(label, variant='default', size='md', custom_class='', **kwargs)

Slots: slot_content

Bar Chart

Style-agnostic SVG bar chart using CSS custom properties.

python · Charts · from djust.components import BarChart · Open it live

BarChart(data=None, labels=None, title=None, width=400, height=250, color='', show_values=True, custom_class='', **kwargs)

Bottom Sheet

Style-agnostic bottom sheet / drawer component.

python · Layout · from djust.components import BottomSheet · Open it live

BottomSheet(title='', open=False, close_event='close_sheet', custom_class='', content='', **kwargs)

Events sent to your view: close_sheet. Give the component a name when a page holds more than one; the handler receives it as name.

Breadcrumb

Breadcrumb navigation component.

template · Navigation · Open it live

{% theme_breadcrumb items=... separator=... css_prefix=... attrs=... slot_separator=... %}

Or as a Python component — from djust.components import Breadcrumb:

Breadcrumb(items=None, custom_class='', **kwargs)

Slots: slot_separator

Accessibility: Breadcrumb nav must have aria-label=Breadcrumb.

Breadcrumb Dropdown

Breadcrumb navigation with overflow collapse into dropdown.

python · Navigation · from djust.components import BreadcrumbDropdown · Open it live

BreadcrumbDropdown(items=None, max_visible=4, separator='/', custom_class='', **kwargs)

Button

Style-agnostic button component using CSS custom properties.

template · Core UI · Open it live

{% theme_button text=... variant=... size=... css_prefix=... attrs=... slot_icon=... %}

Or as a Python component — from djust.components import Button:

Button(label, variant='primary', action=None, data=None, onclick=None, icon=None, icon_position='left', size='md', disabled=False, loading=False, type='button', custom_class='', **kwargs)

Slots: slot_icon, slot_content, slot_loading

C

Calendar Heatmap

Style-agnostic SVG calendar heatmap (GitHub contribution style).

python · Charts · from djust.components import CalendarHeatmap · Open it live

CalendarHeatmap(data=None, year=None, title=None, color_empty='#ebedf0', color_min='#9be9a8', color_max='#216e39', cell_size=12, cell_gap=2, show_month_labels=True, show_day_labels=True, custom_class='', **kwargs)

Calendar View

Month/week/day calendar view with event slots.

python · Charts · from djust.components import CalendarView · Open it live

CalendarView(events=None, month=1, year=2026, view='month', start_day=0, event='', custom_class='', **kwargs)

Callout

Callout/blockquote component.

python · Core UI · from djust.components import Callout · Open it live

Callout(content='', variant='default', title='', icon='', custom_class='', **kwargs)

Card

Style-agnostic card container using CSS custom properties.

template · Core UI · Open it live

{% theme_card title=... content=... footer=... css_prefix=... attrs=... slot_header=... %}

Or as a Python component — from djust.components import Card:

Card(content='', header=None, footer=None, image=None, variant='default', hover=False, padding='md', action=None, data=None, custom_class='', **kwargs)

Slots: slot_header, slot_body, slot_footer

Carousel

Image carousel/slideshow component.

python · Media · from djust.components import Carousel · Open it live

Carousel(images=None, active=0, prev_event='carousel_prev', next_event='carousel_next', go_event='carousel_go', custom_class='', **kwargs)

Events sent to your view: carousel_prev, carousel_next, carousel_go. Give the component a name when a page holds more than one; the handler receives it as name.

Chat Bubble

Single chat message bubble with sender avatar, timestamp, and delivery status.

python · Advanced · from djust.components import ChatBubble · Open it live

ChatBubble(message=None, custom_class='', **kwargs)

Checkbox

template · Core UI · Open it live

{% theme_checkbox name=... label=... description=... css_prefix=... attrs=... slot_label=... %}

Slots: slot_label, slot_description

Accessibility: Label must reference checkbox via for attribute.

Code Block

Code block with syntax highlighting component.

python · Data Display · from djust.components import CodeBlock · Open it live

CodeBlock(code='', language='', filename='', theme='github-dark', custom_class='', **kwargs)

Code Snippet

Code block with copy button and language badge.

python · Core UI · from djust.components import CodeSnippet · Open it live

CodeSnippet(code='', language='', custom_class='', **kwargs)

Needs its script: add <script src="{% static 'djust_components/code-snippet.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Collab Selection

Highlights text or cell ranges selected by other users.

python · Advanced · from djust.components import CollabSelection · Open it live

CollabSelection(users=None, custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="CollabSelection". The markup renders, but the interaction is yours to add — register window.djust.hooks.CollabSelection (see hooks).

Collapsible

Collapsible/expandable section component.

python · Core UI · from djust.components import Collapsible · Open it live

Collapsible(trigger='Toggle', content='', is_open=False, event='toggle_collapsible', custom_class='', **kwargs)

Events sent to your view: toggle_collapsible. Give the component a name when a page holds more than one; the handler receives it as name.

Color Picker

Color picker with swatches component.

python · Forms · from djust.components import ColorPicker · Open it live

ColorPicker(name='', value='#3B82F6', event='', label='', swatches=None, custom_class='', **kwargs)

Events sent to your view: set_color.

Combobox

Searchable select (combobox) component.

python · Forms · from djust.components import Combobox · Open it live

Combobox(name='', label='', value='', options=None, event='', search_event='', placeholder='Search...', custom_class='', **kwargs)

Events sent to your view: language_search, set_language.

Command Palette

Command palette/search overlay component.

python · Advanced · from djust.components import CommandPalette · Open it live

CommandPalette(content='', is_open=False, search_event='palette_search', close_event='close_palette', placeholder='Search commands...', custom_class='', **kwargs)

Events sent to your view: close_palette, palette_search. Give the component a name when a page holds more than one; the handler receives it as name.

Comparison Table

Feature comparison table for SaaS plans / product tiers.

python · Data Display · from djust.components import ComparisonTable · Open it live

ComparisonTable(plans=None, features=None, event='', custom_class='', **kwargs)

Connection Status

Slim bar showing WebSocket state.

python · Feedback · from djust.components import ConnectionStatus · Open it live

ConnectionStatus(reconnecting_text='Reconnecting...', connected_text='Reconnected', custom_class='', **kwargs)

Needs its script: add <script src="{% static 'djust_components/connection-status.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Content Loader

Style-agnostic content loader / suspense component.

python · Feedback · from djust.components import ContentLoader · Open it live

ContentLoader(loading_event='data_loaded', loaded=False, placeholder='', content='', error='', error_event='', custom_class='', **kwargs)

Context Menu

Context menu (right-click menu) component.

python · Advanced · from djust.components import ContextMenu · Open it live

ContextMenu(label='Right-click area', content='', custom_class='', **kwargs)

Conversation Thread

Chat-style message thread with sender avatars, timestamps, and grouping.

python · Advanced · from djust.components import ConversationThread · Open it live

ConversationThread(messages=None, stream_event='new_message', streaming=False, custom_class='', **kwargs)

Cookie Consent

Style-agnostic cookie consent banner.

python · Advanced · from djust.components import CookieConsent · Open it live

CookieConsent(message='We use cookies to improve your experience.', accept_event='accept_cookies', reject_event='', accept_label='Accept', reject_label='Decline', privacy_url='', show_reject=True, position='bottom', custom_class='', **kwargs)

Events sent to your view: accept_cookies. Give the component a name when a page holds more than one; the handler receives it as name.

Copy Button

Copy-to-clipboard button component.

python · Advanced · from djust.components import CopyButton · Open it live

CopyButton(text='', label='Copy', copied_label='Copied!', variant='outline', size='sm', custom_class='', **kwargs)

Copyable Text

Inline click-to-copy text with "Copied!" tooltip feedback.

python · Advanced · from djust.components import CopyableText · Open it live

CopyableText(text='', copied_label='Copied!', custom_class='', **kwargs)

Needs its script: add <script src="{% static 'djust_components/copyable-text.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Countdown

Style-agnostic countdown timer component.

python · Advanced · from djust.components import Countdown · Open it live

Countdown(target='', event='', show_days=True, show_seconds=True, labels=None, custom_class='', **kwargs)

Needs its script: add <script src="{% static 'djust_components/countdown.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Cron Input

Visual cron expression builder with human-readable preview.

python · Forms · from djust.components import CronInput · Open it live

CronInput(name='cron', value='* * * * *', event='', custom_class='', **kwargs)

Currency Input

Numeric input with currency symbol prefix and formatting hints.

python · Forms · from djust.components import CurrencyInput · Open it live

CurrencyInput(name='', currency='USD', value='', label='', min=None, max=None, step='0.01', placeholder='0.00', event='', disabled=False, required=False, error='', custom_class='', **kwargs)

Cursors Overlay

Overlay showing other users' cursor positions in real-time.

python · Advanced · from djust.components import CursorsOverlay · Open it live

CursorsOverlay(users=None, custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="CursorsOverlay". The markup renders, but the interaction is yours to add — register window.djust.hooks.CursorsOverlay (see hooks).

D

Dashboard Grid

CSS Grid layout with draggable and resizable dashboard panels.

python · Layout · from djust.components import DashboardGrid · Open it live

DashboardGrid(panels=None, columns=4, row_height='200px', gap='1rem', move_event='dashboard_move', resize_event='dashboard_resize', custom_class='', **kwargs)

Events sent to your view: dashboard_move, dashboard_resize. Give the component a name when a page holds more than one; the handler receives it as name.

Needs a client hook djust does not ship: dj-hook="DashboardGrid". The markup renders, but the interaction is yours to add — register window.djust.hooks.DashboardGrid (see hooks).

Data Card Grid

Filterable card grid layout.

python · Data Display · from djust.components import DataCardGrid · Open it live

DataCardGrid(items=None, columns=3, filter_key='category', event='', custom_class='', **kwargs)

Data Grid

Editable spreadsheet-like data grid with cell editing, column resize,

python · Data Display · from djust.components import DataGrid · Open it live

DataGrid(columns=None, rows=None, row_key='id', edit_event='grid_cell_edit', resizable=True, frozen_left=0, frozen_right=0, striped=False, compact=False, keyboard_nav=True, new_row_event='', delete_row_event='', custom_class='', **kwargs)

Events sent to your view: grid_cell_edit. Give the component a name when a page holds more than one; the handler receives it as name.

Needs its script: add <script src="{% static 'djust_components/data-grid.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Data Table

Data table component for tabular data display.

python · Data Display · from djust.components import DataTable · Open it live

DataTable(columns=None, rows=None, sort_by='', sort_desc=False, sort_event='on_table_sort', striped=False, compact=False, custom_class='', **kwargs)

Events sent to your view: on_table_sort. Give the component a name when a page holds more than one; the handler receives it as name.

Needs its script: add <script src="{% static 'djust_components/data-table.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Date Picker

Server-rendered calendar date picker component.

python · Forms · from djust.components import DatePicker · Open it live

DatePicker(name='date', label='', selected='', year=0, month=0, prev_event='date_prev_month', next_event='date_next_month', select_event='date_select', custom_class='', **kwargs)

Events sent to your view: date_prev_month, date_next_month, date_select.

Dependent Select

Cascading dropdown that reloads options when a parent field changes.

python · Forms · from djust.components import DependentSelect · Open it live

DependentSelect(name='', parent='', source_event='', label='', placeholder='Select...', value='', options=None, loading=False, disabled=False, required=False, error='', custom_class='', **kwargs)

Description List

Description list (term/detail pairs) component.

python · Data Display · from djust.components import DescriptionList · Open it live

DescriptionList(items=None, layout='vertical', custom_class='', **kwargs)

Diff Viewer

Side-by-side or unified text diff viewer.

python · Data Display · from djust.components import DiffViewer · Open it live

DiffViewer(old='', new='', mode='split', title_old='Original', title_new='Modified', show_line_numbers=True, custom_class='', **kwargs)

Dropdown

Dropdown menu component.

template · Core UI · Open it live

{% theme_dropdown id=... label=... align=... css_prefix=... attrs=... slot_trigger=... %}

Or as a Python component — from djust.components import Dropdown:

Dropdown(label='Menu', content='', is_open=False, toggle_event='toggle_dropdown', variant='default', custom_class='', **kwargs)

Events sent to your view: toggle_dropdown.

Slots: slot_trigger, slot_menu

Accessibility: Trigger must have aria-haspopup=true; Trigger must have aria-expanded.

Dropdown Menu

Style-agnostic dropdown menu component.

python · Core UI · from djust.components import DropdownMenu · Open it live

DropdownMenu(label='Menu', items=None, open=False, toggle_event='toggle_menu', align='left', custom_class='', **kwargs)

Events sent to your view: toggle_menu. Give the component a name when a page holds more than one; the handler receives it as name.

E

Empty State

Empty state placeholder component.

python · Feedback · from djust.components import EmptyState · Open it live

EmptyState(title='', description='', icon='', action_label='', action_event='', custom_class='', **kwargs)

Error Boundary

Style-agnostic error boundary component.

python · Feedback · from djust.components import ErrorBoundary · Open it live

ErrorBoundary(fallback='Something went wrong', error='', retry_event='', custom_class='', content='', **kwargs)

Error Page

Styled error page with code, title, message, and action.

python · Feedback · from djust.components import ErrorPage · Open it live

ErrorPage(code=500, title='Something went wrong', message='', action_url='/', action_label='Go Home', custom_class='', **kwargs)

Expandable Text

Style-agnostic expandable text component using CSS line-clamp.

python · Data Display · from djust.components import ExpandableText · Open it live

ExpandableText(text='', max_lines=3, expanded=False, toggle_event='toggle_expand', more_label='Read more', less_label='Show less', custom_class='', **kwargs)

Events sent to your view: toggle_expand. Give the component a name when a page holds more than one; the handler receives it as name.

Export Dialog

Style-agnostic export dialog component.

python · Advanced · from djust.components import ExportDialog · Open it live

ExportDialog(formats=None, columns=None, event='export', open=False, close_event='close_export', selected_format='', title='Export Data', custom_class='', **kwargs)

Events sent to your view: close_export, export. Give the component a name when a page holds more than one; the handler receives it as name.

F

Fab

Floating action button component.

python · Layout · from djust.components import Fab · Open it live

Fab(icon='+', event='', position='bottom-right', label='', size='md', variant='primary', custom_class='', **kwargs)

Feedback Widget

Thumbs up/down, star rating, or emoji feedback widget.

python · Advanced · from djust.components import FeedbackWidget · Open it live

FeedbackWidget(event='rate_response', mode='thumbs', value=None, custom_class='', **kwargs)

Events sent to your view: rate_response. Give the component a name when a page holds more than one; the handler receives it as name.

Fieldset

Fieldset with legend component.

python · Forms · from djust.components import Fieldset · Open it live

Fieldset(content='', legend='', disabled=False, custom_class='', **kwargs)

File Dropzone

Drag-and-drop file upload zone component.

python · Media · from djust.components import FileDropzone · Open it live

FileDropzone(name='file', label='', accept='', multiple=False, max_size_mb=10, custom_class='', **kwargs)

File Tree

File browser tree with icons, expand/collapse, and selection.

python · Media · from djust.components import FileTree · Open it live

FileTree(nodes=None, selected='', event='select_file', show_icons=True, custom_class='', **kwargs)

Events sent to your view: select_file. Give the component a name when a page holds more than one; the handler receives it as name.

Needs a client hook djust does not ship: dj-hook="FileTree". The markup renders, but the interaction is yours to add — register window.djust.hooks.FileTree (see hooks).

Filter Bar

Filter bar component with filter controls.

python · Advanced · from djust.components import FilterBar · Open it live

FilterBar(content='', clear_event='clear_filters', active_count=0, custom_class='', **kwargs)

Events sent to your view: clear_filters. Give the component a name when a page holds more than one; the handler receives it as name.

Form Array

Style-agnostic form array component.

python · Forms · from djust.components import FormArray · Open it live

FormArray(name='items', rows=None, min=1, max=10, add_event='add_row', remove_event='remove_row', add_label='Add row', custom_class='', **kwargs)

Events sent to your view: add_row, remove_row.

Form Group

Form group wrapper component.

python · Forms · from djust.components import FormGroup · Open it live

FormGroup(content='', label='', error='', helper='', required=False, for_input='', custom_class='', **kwargs)

Form Validation

Renders inline validation error for a single form field.

python · Forms · from djust.components import FieldError, FormErrors · Open it live

FieldError(field=None, custom_class='', **kwargs)

G

Gantt Chart

SVG Gantt chart for project management timelines.

python · Charts · from djust.components import GanttChart · Open it live

GanttChart(tasks=None, title=None, unit_label='Day', units=None, row_height=32, width=600, custom_class='', **kwargs)

Gauge

SVG donut/gauge chart component.

python · Charts · from djust.components import Gauge · Open it live

Gauge(value=0, max_value=100, label='', color='primary', size='md', show_value=True, custom_class='', **kwargs)

H

Heatmap

Style-agnostic SVG heatmap using CSS custom properties.

python · Charts · from djust.components import Heatmap · Open it live

Heatmap(data=None, x_labels=None, y_labels=None, title=None, color_min='#f0f9ff', color_max='#1e40af', cell_size=36, show_values=True, custom_class='', **kwargs)

Hover Card

Style-agnostic hover card using CSS custom properties.

python · Layout · from djust.components import HoverCard · Open it live

HoverCard(trigger='', content='', position='bottom', delay_in=200, delay_out=300, custom_class='', **kwargs)

I

Icon

Icon component wrapper.

python · Advanced · from djust.components import Icon · Open it live

Icon(name='', size='md', icon_set='heroicons', custom_class='', **kwargs)

Image Cropper

Drag-to-crop image component with optional aspect ratio lock.

python · Media · from djust.components import ImageCropper · Open it live

ImageCropper(src='', crop_event='save_crop', aspect_ratio='', min_width=50, min_height=50, disabled=False, custom_class='', **kwargs)

Events sent to your view: save_crop. Give the component a name when a page holds more than one; the handler receives it as name.

Needs a client hook djust does not ship: dj-hook="ImageCropper". The markup renders, but the interaction is yours to add — register window.djust.hooks.ImageCropper (see hooks).

Image Lightbox

Full-screen image viewer overlay with navigation.

python · Media · from djust.components import ImageLightbox · Open it live

ImageLightbox(images=None, active=0, open=False, close_event='close_lightbox', navigate_event='lightbox_navigate', show_counter=True, custom_class='', **kwargs)

Events sent to your view: close_lightbox, lightbox_navigate. Give the component a name when a page holds more than one; the handler receives it as name.

Needs a client hook djust does not ship: dj-hook="ImageLightbox". The markup renders, but the interaction is yours to add — register window.djust.hooks.ImageLightbox (see hooks).

Image Upload Preview

Multi-image upload with thumbnail preview.

python · Media · from djust.components import ImageUploadPreview · Open it live

ImageUploadPreview(name='images', max=5, event='upload', accept='image/*', previews=None, custom_class='', **kwargs)

Events sent to your view: upload.

Needs a client hook djust does not ship: dj-hook="ImageUploadPreview". The markup renders, but the interaction is yours to add — register window.djust.hooks.ImageUploadPreview (see hooks).

Import Wizard

Style-agnostic import wizard component.

python · Advanced · from djust.components import ImportWizard · Open it live

ImportWizard(accepted_formats='.csv', model_fields=None, event='import_data', step='upload', upload_event='upload_file', custom_class='', **kwargs)

Events sent to your view: upload_file, import_data. Give the component a name when a page holds more than one; the handler receives it as name.

Infinite Scroll

Style-agnostic infinite scroll component.

python · Advanced · from djust.components import InfiniteScroll · Open it live

InfiniteScroll(load_event='load_more', threshold='200px', loading=False, finished=False, custom_class='', **kwargs)

Events sent to your view: load_more. Give the component a name when a page holds more than one; the handler receives it as name.

Needs its script: add <script src="{% static 'djust_components/infinite-scroll.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Inline Edit

Inline edit component for in-place text editing.

python · Data Display · from djust.components import InlineEdit · Open it live

InlineEdit(value='', name='', event='', editing=False, edit_event='inline_edit', custom_class='', **kwargs)

Events sent to your view: inline_edit.

Input

template · Core UI · Open it live

{% theme_input name=... label=... placeholder=... type=... css_prefix=... attrs=... %}

Slots: slot_label, slot_input, slot_help_text, slot_error

Accessibility: Label must reference input via for attribute.

Input Group

Input group wrapper component (prefix/suffix addons).

python · Forms · from djust.components import InputGroup · Open it live

InputGroup(content='', size='md', error='', custom_class='', **kwargs)

J

Json Viewer

Interactive collapsible JSON tree viewer.

python · Data Display · from djust.components import JsonViewer · Open it live

JsonViewer(data=None, collapsed_depth=2, root_label='root', copy_button=True, custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="JsonViewer". The markup renders, but the interaction is yours to add — register window.djust.hooks.JsonViewer (see hooks).

K

Kanban Board

Kanban board component.

python · Advanced · from djust.components import KanbanBoard · Open it live

KanbanBoard(columns=None, move_event='kanban_move', add_card_event='kanban_add_card', custom_class='', **kwargs)

Events sent to your view: kanban_add_card, kanban_move. Give the component a name when a page holds more than one; the handler receives it as name.

Kbd

Keyboard shortcut display component.

python · Core UI · from djust.components import Kbd · Open it live

Kbd(keys=None, custom_class='', **kwargs)

L

Line Chart

Style-agnostic SVG line chart using CSS custom properties.

python · Charts · from djust.components import LineChart · Open it live

LineChart(series=None, labels=None, title=None, width=400, height=250, area=False, show_dots=True, show_legend=True, custom_class='', **kwargs)

Live Counter

Animated counter updating in real-time via WebSocket push.

python · Advanced · from djust.components import LiveCounter · Open it live

LiveCounter(value=0, label='', stream_event='counter_update', size='md', custom_class='', **kwargs)

Needs its script: add <script src="{% static 'djust_components/live-counter.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Live Indicator

Shows 'Alice is typing...' style indicator per field.

python · Feedback · from djust.components import LiveIndicator · Open it live

LiveIndicator(user=None, field='', action='typing', active=True, custom_class='', **kwargs)

Loading Overlay

Loading overlay component.

python · Feedback · from djust.components import LoadingOverlay · Open it live

LoadingOverlay(content='', active=False, text='', spinner_size='md', custom_class='', **kwargs)

Log Viewer

Monospace streaming log display with level coloring.

python · Data Display · from djust.components import LogViewer · Open it live

LogViewer(lines=None, stream_event='', show_line_numbers=True, auto_scroll=True, filter_level='', wrap=False, max_lines=0, custom_class='', **kwargs)

Needs a client hook djust does not ship: dj-hook="LogViewer". The markup renders, but the interaction is yours to add — register window.djust.hooks.LogViewer (see hooks).

M

Map Picker

Click-to-pick location on a Leaflet/OSM map.

python · Media · from djust.components import MapPicker · Open it live

MapPicker(lat=0.0, lng=0.0, pick_event='set_location', zoom=13, height='400px', custom_class='', **kwargs)

Events sent to your view: set_location. Give the component a name when a page holds more than one; the handler receives it as name.

Needs a client hook djust does not ship: dj-hook="MapPicker". The markup renders, but the interaction is yours to add — register window.djust.hooks.MapPicker (see hooks).

Markdown

Render Markdown text as sanitized HTML.

python · Data Display · from djust.components import Markdown · Open it live

Markdown(text='', custom_class='', extensions=None, **kwargs)

Markdown Editor

Split-pane markdown editor with live preview.

python · Advanced · from djust.components import MarkdownEditor · Open it live

MarkdownEditor(name='content', value='', preview=True, toolbar=True, placeholder='Write markdown...', rows=12, disabled=False, event='', custom_class='', mode='markdown', **kwargs)

Needs its script: add <script src="{% static 'djust_components/markdown-editor.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Markdown Textarea

Style-agnostic textarea with markdown preview toggle.

python · Advanced · from djust.components import MarkdownTextarea · Open it live

MarkdownTextarea(name='content', value='', preview=False, toggle_event='toggle_preview', placeholder='Write markdown here...', rows=6, disabled=False, custom_class='', **kwargs)

Events sent to your view: toggle_preview.

Needs its script: add <script src="{% static 'djust_components/markdown-textarea.js' %}"></script> to the page. djust ships it; without it the markup renders but does not update.

Masonry Grid

Pinterest-style masonry grid layout.

python · Layout · from djust.components import MasonryGrid · Open it live

MasonryGrid(items=None, columns=3, gap=16, custom_class='', **kwargs)

Mentions Input

Text input that triggers a user mention dropdown on @ character.

python · Forms · from djust.components import MentionsInput · Open it live

MentionsInput(name='message', users=None, event='send', placeholder='Type @ to mention...', disabled=False, custom_class='', **kwargs)

Events sent to your view: send.

Needs a client hook djust does not ship: dj-hook="MentionsInput". The markup renders, but the interaction is yours to add — register window.djust.hooks.MentionsInput (see hooks).

Meter

Style-agnostic meter / stacked progress component.

python · Core UI · from djust.components import Meter · Open it live

Meter(segments=None, total=100, label='', show_legend=True, custom_class='', **kwargs)

Modal

Modal dialog overlay component.

template · Core UI · Open it live

{% theme_modal id=... title=... size=... css_prefix=... attrs=... slot_header=... %}

Or as a Python component — from djust.components import Modal:

Modal(title='', content='', is_open=False, size='md', close_event='close_modal', custom_class='', **kwargs)

Events sent to your view: toggle_modal.

Slots: slot_header, slot_body, slot_footer, slot_close

Accessibility: Modal must have role=dialog; Modal must have aria-modal=true.

Model Selector

Rich select for AI model selection with metadata display.

python · Advanced · from djust.components import ModelSelector · Open it live

ModelSelector(name='model', options=None, value='', event='select_model', toggle_event='toggle_model_selector', is_open=False, placeholder='Select a model...', disabled=False, label='', custom_class='', **kwargs)

Events sent to your view: toggle_model_selector, select_model.

Multi Select

Multi-select checkbox list component.

python · Forms · from djust.components import MultiSelect · Open it live

MultiSelect(name='', label='', options=None, selected=None, event='', placeholder='Search...', custom_class='', **kwargs)