---
# GENERATED FILE — do not edit.
# Source: `manage.py docs_generate` (djust 1.2.0).
# Edit the generator in docs_app/generator.py instead.
title: "Component reference"
description: "Find a built-in component and check its constructor, defaults, events and options. 179 components, indexed A–Z."
level: reference
order: 90
section: reference
generated: true
toc_depth: 2
---
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](https://djust.org/components/), 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](/guides/components/).
For custom component base classes, see [Components API](/api-reference/components/).

## Using them

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

```python
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:

```html
{{ rating }}
```

## Alphabetical index

[A](#a) · [B](#b) · [C](#c) · [D](#d) · [E](#e) · [F](#f) · [G](#g) · [H](#h) · [I](#i) · [J](#j) · [K](#k) · [L](#l) · [M](#m) · [N](#n) · [O](#o) · [P](#p) · [Q](#q) · [R](#r) · [S](#s) · [T](#t) · [V](#v) · [W](#w)

| Component | Purpose |
| --- | --- |
| [Accordion](#accordion) | Accordion/collapsible sections component. |
| [Activity Feed](#activity-feed) | Real-time activity feed with streaming support. |
| [Agent Step](#agent-step) | AI agent tool-use step card. |
| [Alert](#alert) | Style-agnostic alert component using CSS custom properties. |
| [Animated Number](#animated-number) | Animated counting number display. |
| [Announcement Bar](#announcement-bar) | Announcement/banner bar component. |
| [App Shell](#app-shell) | Application shell layout component. |
| [Approval Gate](#approval-gate) | Inline confirmation card for AI agent actions with risk levels. |
| [Aspect Ratio](#aspect-ratio) | Aspect ratio container component. |
| [Audit Log](#audit-log) | Style-agnostic audit log table component. |
| [Avatar](#avatar) | Avatar component with optional status indicator. |
| [Avatar Group](#avatar-group) | Style-agnostic avatar group using CSS custom properties. |
| [Badge](#badge) | Style-agnostic badge component using CSS custom properties. |
| [Bar Chart](#bar-chart) | Style-agnostic SVG bar chart using CSS custom properties. |
| [Bottom Sheet](#bottom-sheet) | Style-agnostic bottom sheet / drawer component. |
| [Breadcrumb](#breadcrumb) | Breadcrumb navigation component. |
| [Breadcrumb Dropdown](#breadcrumb-dropdown) | Breadcrumb navigation with overflow collapse into dropdown. |
| [Button](#button) | Style-agnostic button component using CSS custom properties. |
| [Calendar Heatmap](#calendar-heatmap) | Style-agnostic SVG calendar heatmap (GitHub contribution style). |
| [Calendar View](#calendar-view) | Month/week/day calendar view with event slots. |
| [Callout](#callout) | Callout/blockquote component. |
| [Card](#card) | Style-agnostic card container using CSS custom properties. |
| [Carousel](#carousel) | Image carousel/slideshow component. |
| [Chat Bubble](#chat-bubble) | Single chat message bubble with sender avatar, timestamp, and delivery status. |
| [Checkbox](#checkbox) |  |
| [Code Block](#code-block) | Code block with syntax highlighting component. |
| [Code Snippet](#code-snippet) | Code block with copy button and language badge. |
| [Collab Selection](#collab-selection) | Highlights text or cell ranges selected by other users. |
| [Collapsible](#collapsible) | Collapsible/expandable section component. |
| [Color Picker](#color-picker) | Color picker with swatches component. |
| [Combobox](#combobox) | Searchable select (combobox) component. |
| [Command Palette](#command-palette) | Command palette/search overlay component. |
| [Comparison Table](#comparison-table) | Feature comparison table for SaaS plans / product tiers. |
| [Connection Status](#connection-status) | Slim bar showing WebSocket state. |
| [Content Loader](#content-loader) | Style-agnostic content loader / suspense component. |
| [Context Menu](#context-menu) | Context menu (right-click menu) component. |
| [Conversation Thread](#conversation-thread) | Chat-style message thread with sender avatars, timestamps, and grouping. |
| [Cookie Consent](#cookie-consent) | Style-agnostic cookie consent banner. |
| [Copy Button](#copy-button) | Copy-to-clipboard button component. |
| [Copyable Text](#copyable-text) | Inline click-to-copy text with "Copied!" tooltip feedback. |
| [Countdown](#countdown) | Style-agnostic countdown timer component. |
| [Cron Input](#cron-input) | Visual cron expression builder with human-readable preview. |
| [Currency Input](#currency-input) | Numeric input with currency symbol prefix and formatting hints. |
| [Cursors Overlay](#cursors-overlay) | Overlay showing other users' cursor positions in real-time. |
| [Dashboard Grid](#dashboard-grid) | CSS Grid layout with draggable and resizable dashboard panels. |
| [Data Card Grid](#data-card-grid) | Filterable card grid layout. |
| [Data Grid](#data-grid) | Editable spreadsheet-like data grid with cell editing, column resize, |
| [Data Table](#data-table) | Data table component for tabular data display. |
| [Date Picker](#date-picker) | Server-rendered calendar date picker component. |
| [Dependent Select](#dependent-select) | Cascading dropdown that reloads options when a parent field changes. |
| [Description List](#description-list) | Description list (term/detail pairs) component. |
| [Diff Viewer](#diff-viewer) | Side-by-side or unified text diff viewer. |
| [Dropdown](#dropdown) | Dropdown menu component. |
| [Dropdown Menu](#dropdown-menu) | Style-agnostic dropdown menu component. |
| [Empty State](#empty-state) | Empty state placeholder component. |
| [Error Boundary](#error-boundary) | Style-agnostic error boundary component. |
| [Error Page](#error-page) | Styled error page with code, title, message, and action. |
| [Expandable Text](#expandable-text) | Style-agnostic expandable text component using CSS line-clamp. |
| [Export Dialog](#export-dialog) | Style-agnostic export dialog component. |
| [Fab](#fab) | Floating action button component. |
| [Feedback Widget](#feedback-widget) | Thumbs up/down, star rating, or emoji feedback widget. |
| [Fieldset](#fieldset) | Fieldset with legend component. |
| [File Dropzone](#file-dropzone) | Drag-and-drop file upload zone component. |
| [File Tree](#file-tree) | File browser tree with icons, expand/collapse, and selection. |
| [Filter Bar](#filter-bar) | Filter bar component with filter controls. |
| [Form Array](#form-array) | Style-agnostic form array component. |
| [Form Group](#form-group) | Form group wrapper component. |
| [Form Validation](#form-validation) | Renders inline validation error for a single form field. |
| [Gantt Chart](#gantt-chart) | SVG Gantt chart for project management timelines. |
| [Gauge](#gauge) | SVG donut/gauge chart component. |
| [Heatmap](#heatmap) | Style-agnostic SVG heatmap using CSS custom properties. |
| [Hover Card](#hover-card) | Style-agnostic hover card using CSS custom properties. |
| [Icon](#icon) | Icon component wrapper. |
| [Image Cropper](#image-cropper) | Drag-to-crop image component with optional aspect ratio lock. |
| [Image Lightbox](#image-lightbox) | Full-screen image viewer overlay with navigation. |
| [Image Upload Preview](#image-upload-preview) | Multi-image upload with thumbnail preview. |
| [Import Wizard](#import-wizard) | Style-agnostic import wizard component. |
| [Infinite Scroll](#infinite-scroll) | Style-agnostic infinite scroll component. |
| [Inline Edit](#inline-edit) | Inline edit component for in-place text editing. |
| [Input](#input) |  |
| [Input Group](#input-group) | Input group wrapper component (prefix/suffix addons). |
| [Json Viewer](#json-viewer) | Interactive collapsible JSON tree viewer. |
| [Kanban Board](#kanban-board) | Kanban board component. |
| [Kbd](#kbd) | Keyboard shortcut display component. |
| [Line Chart](#line-chart) | Style-agnostic SVG line chart using CSS custom properties. |
| [Live Counter](#live-counter) | Animated counter updating in real-time via WebSocket push. |
| [Live Indicator](#live-indicator) | Shows 'Alice is typing...' style indicator per field. |
| [Loading Overlay](#loading-overlay) | Loading overlay component. |
| [Log Viewer](#log-viewer) | Monospace streaming log display with level coloring. |
| [Map Picker](#map-picker) | Click-to-pick location on a Leaflet/OSM map. |
| [Markdown](#markdown) | Render Markdown text as sanitized HTML. |
| [Markdown Editor](#markdown-editor) | Split-pane markdown editor with live preview. |
| [Markdown Textarea](#markdown-textarea) | Style-agnostic textarea with markdown preview toggle. |
| [Masonry Grid](#masonry-grid) | Pinterest-style masonry grid layout. |
| [Mentions Input](#mentions-input) | Text input that triggers a user mention dropdown on @ character. |
| [Meter](#meter) | Style-agnostic meter / stacked progress component. |
| [Modal](#modal) | Modal dialog overlay component. |
| [Model Selector](#model-selector) | Rich select for AI model selection with metadata display. |
| [Multi Select](#multi-select) | Multi-select checkbox list component. |
| [Multimodal Input](#multimodal-input) | Text area with optional file attachment and voice input buttons. |
| [Nav](#nav) |  |
| [Nav Group](#nav-group) |  |
| [Nav Item](#nav-item) |  |
| [Nav Menu](#nav-menu) | Horizontal navigation menu component. |
| [Notification Badge](#notification-badge) | Style-agnostic notification badge using CSS custom properties. |
| [Notification Center](#notification-center) | Notification bell with dropdown list component. |
| [Notification Popover](#notification-popover) | Style-agnostic notification popover using CSS custom properties. |
| [Number Stepper](#number-stepper) | Numeric +/- stepper input component. |
| [Org Chart](#org-chart) | Hierarchical org chart / tree visualization. |
| [Otp Input](#otp-input) | One-time code input component. |
| [Page Alert](#page-alert) | Style-agnostic full-width page alert / banner component. |
| [Page Header](#page-header) | Page-level header with title, subtitle, and optional actions. |
| [Pagination](#pagination) | Pagination controls component. |
| [Pie Chart](#pie-chart) | Style-agnostic SVG pie/donut chart using CSS custom properties. |
| [Pivot Table](#pivot-table) | Configurable pivot table that aggregates data by row/column dimensions. |
| [Popover](#popover) | Popover overlay component. |
| [Presence Avatars](#presence-avatars) | Stacked avatar group showing online/present users with status dots. |
| [Progress](#progress) | Style-agnostic progress bar component using CSS custom properties. |
| [Progress Circle](#progress-circle) | Style-agnostic circular progress indicator using SVG stroke-dasharray. |
| [Prompt Editor](#prompt-editor) | Template editing with {{variable}} highlighting. |
| [Qr Code](#qr-code) | Pure SVG QR code generator. |
| [Radio](#radio) |  |
| [Rating](#rating) | Star rating component. |
| [Reactions](#reactions) | Slack-style emoji reactions with live-updating counts. |
| [Relative Time](#relative-time) | Displays a datetime as relative text ("3 hours ago") with optional |
| [Resizable Panel](#resizable-panel) | Container with a drag-to-resize handle. |
| [Responsive Image](#responsive-image) | Picture element with srcset, lazy loading, and blur-up placeholder. |
| [Ribbon](#ribbon) | Corner ribbon overlay badge. |
| [Rich Select](#rich-select) | Select dropdown where each option can include icons, images, descriptions, |
| [Rich Text Editor](#rich-text-editor) | Basic rich text editor component (contenteditable + toolbar). |
| [Scroll Area](#scroll-area) | Scrollable area container component. |
| [Scroll Spy](#scroll-spy) | Style-agnostic scroll spy component. |
| [Scroll To Top](#scroll-to-top) | Floating scroll-to-top button that appears after a scroll threshold. |
| [Segmented Progress](#segmented-progress) | Style-agnostic segmented progress bar with labeled steps. |
| [Select](#select) |  |
| [Server Event Toast](#server-event-toast) |  |
| [Sheet](#sheet) | Sheet/drawer overlay component. |
| [Sidebar](#sidebar) | Sidebar navigation component. |
| [Sidebar Nav](#sidebar-nav) |  |
| [Signature Pad](#signature-pad) | Canvas-based signature capture pad. |
| [Skeleton](#skeleton) | Skeleton loading placeholder component. |
| [Skeleton Factory](#skeleton-factory) | Style-agnostic skeleton loading state generator. |
| [Sortable Grid](#sortable-grid) | 2D drag-and-drop grid layout. |
| [Sortable List](#sortable-list) | Drag-and-drop reorderable list. |
| [Source Citation](#source-citation) | Inline footnote marker with hover popover showing source details. |
| [Sparkline](#sparkline) | Style-agnostic inline sparkline using SVG. |
| [Spinner](#spinner) | Style-agnostic spinner component using CSS custom properties. |
| [Split Button](#split-button) | Split button with primary action and dropdown menu. |
| [Split Pane](#split-pane) | Split pane/resizable layout component. |
| [Stat Card](#stat-card) | Style-agnostic stat card component using CSS custom properties. |
| [Status Dot](#status-dot) | Style-agnostic animated status indicator dot using CSS custom properties. |
| [Status Indicator](#status-indicator) | Style-agnostic status indicator with colored dot and optional label. |
| [Stepper](#stepper) | Step indicator/wizard progress component. |
| [Sticky Header](#sticky-header) | Sticky header component. |
| [Streaming Text](#streaming-text) | Renders text arriving incrementally via WebSocket with typing cursor. |
| [Switch](#switch) | Style-agnostic toggle switch component using CSS custom properties. |
| [Table](#table) |  |
| [Table Of Contents](#table-of-contents) | Table of contents navigation component. |
| [Tabs](#tabs) | Tab navigation component. |
| [Tag](#tag) | Style-agnostic tag/chip component using CSS custom properties. |
| [Tag Input](#tag-input) | Tag input component for adding/removing tags. |
| [Terminal](#terminal) | Monospace terminal emulator display with ANSI color support. |
| [Textarea](#textarea) |  |
| [Theme Toggle](#theme-toggle) | Light/dark/system theme toggle component. |
| [Thinking Indicator](#thinking-indicator) | Animated status indicator for AI processing states. |
| [Time Picker](#time-picker) | Style-agnostic time picker component using CSS custom properties. |
| [Timeline](#timeline) | Timeline component. |
| [Toast](#toast) | Style-agnostic toast notification component using CSS custom properties. |
| [Toggle Group](#toggle-group) | Segmented toggle button group component. |
| [Token Counter](#token-counter) | Compact progress display showing token usage versus limit. |
| [Toolbar](#toolbar) | Toolbar component with button groups. |
| [Tooltip](#tooltip) | Tooltip component. |
| [Tour](#tour) | Product tour with spotlight highlights and step navigation. |
| [Tree View](#tree-view) | Expandable tree view component. |
| [Treemap](#treemap) | Style-agnostic SVG treemap using CSS custom properties. |
| [Truncated List](#truncated-list) | Style-agnostic truncated list component. |
| [Virtual List](#virtual-list) | Paginated virtual list component. |
| [Voice Input](#voice-input) | Mic button with recording animation for speech input. |
| [Wizard](#wizard) | Style-agnostic multi-step form wizard using CSS custom properties. |

`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](https://djust.org/components/accordion/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: id, title, content |
| `active` | str | `''` | id of currently open item |
| `event` | str | `'accordion_toggle'` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/activity_feed/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `events` | List[dict] \| None | `None` | List of event dicts with user, action, target, time, avatar. |
| `stream_event` | str | `''` | WebSocket event name for live updates. |
| `max_items` | int | `50` | Maximum number of visible items (default: 50). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Agent Step

AI agent tool-use step card.

`python` · Feedback · `from djust.components import AgentStep` · [Open it live](https://djust.org/components/agent_step/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `tool` | str | `''` | Tool/function name. |
| `status` | str | `'pending'` | Step status (pending, running, complete, error). |
| `content` | str | `''` | Step result content (plain text). |
| `duration` | str | `''` | Execution duration text (e.g. "1.2s"). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Alert

Style-agnostic alert component using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/alert/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | str | *required* | Alert text content |
| `title` | str \| None | `None` | — |
| `variant` | str | `default` | Color variant (info, success, warning, danger) |
| `dismissible` | bool | `False` | Whether the alert can be dismissed |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_icon` | str | `None` | — |
| `slot_message` | str | `None` | — |
| `slot_actions` | str | `None` | — |
| `slot_dismiss` | str | `None` | — |

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

```text
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](https://djust.org/components/animated_number/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | float | `0` | Target numeric value. |
| `prefix` | str | `''` | Text before the number (e.g. "$"). |
| `suffix` | str | `''` | Text after the number (e.g. "%"). |
| `duration` | int | `800` | Animation duration in ms (default: 800). |
| `decimals` | int | `0` | Number of decimal places (default: 0). |
| `separator` | str | `','` | Thousands separator (default: ","). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Announcement Bar

Announcement/banner bar component.

`python` · Advanced · `from djust.components import AnnouncementBar` · [Open it live](https://djust.org/components/announcement_bar/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | bar content (pre-rendered HTML) |
| `variant` | str | `'info'` | info, warning, danger, success |
| `dismissible` | bool | `False` | whether bar can be dismissed |
| `dismiss_event` | str | `'dismiss_announcement'` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/app_shell/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `sidebar` | str | `''` | sidebar content (pre-rendered HTML) |
| `header` | str | `''` | header content (pre-rendered HTML) |
| `content` | str | `''` | main content (pre-rendered HTML) |
| `variant` | str | `'default'` | default, compact |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Approval Gate

Inline confirmation card for AI agent actions with risk levels.

`python` · Feedback · `from djust.components import ApprovalGate` · [Open it live](https://djust.org/components/approval_gate/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | str | `''` | Description of the action requiring approval |
| `risk` | str | `'medium'` | Risk level (low, medium, high, critical) |
| `approve_event` | str | `'approve'` | djust event fired on approval |
| `reject_event` | str | `'reject'` | djust event fired on rejection |
| `approve_label` | str | `'Approve'` | Label for approve button (default: "Approve") |
| `reject_label` | str | `'Reject'` | Label for reject button (default: "Reject") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/aspect_ratio/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | contained content (pre-rendered HTML) |
| `ratio` | str | `'16/9'` | CSS aspect-ratio value (e.g. '16/9') |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Audit Log

Style-agnostic audit log table component.

`python` · Data Display · `from djust.components import AuditLog` · [Open it live](https://djust.org/components/audit_log/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | list \| None | `None` | List of entry dicts with timestamp, user, action, resource, detail |
| `stream_event` | str | `''` | djust event for new entry streaming |
| `columns` | list \| None | `None` | List of column names to show (default: all) |
| `allowed_actions` | set \| None | `None` | Set of action values permitted for CSS class injection (default: create, read, update, delete, login, logout, export, import, approve, reject) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Avatar

Avatar component with optional status indicator.

`template` · Core UI · [Open it live](https://djust.org/components/avatar/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | str \| None | `None` | image URL |
| `alt` | str | `` | alt text |
| `name` | str | `` | — |
| `size` | str | `md` | xs, sm, md, lg, xl |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_image` | str | `None` | — |
| `slot_fallback` | str | `None` | — |

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

```text
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](https://djust.org/components/avatar_group/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `users` | List[Union[dict, object]] \| None | `None` | List of user dicts (name, avatar/src) or objects with get_full_name() and optional avatar attribute. |
| `max_display` | int | `5` | Maximum avatars shown before "+N" overflow (default: 5). |
| `size` | str | `'md'` | Size variant (sm, md, lg). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## B

### Badge

Style-agnostic badge component using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/badge/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | *required* | — |
| `variant` | str | `default` | Color variant (default, success, info, warning, danger, muted) |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_content` | str | `None` | — |

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

```text
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](https://djust.org/components/bar_chart/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | list \| None | `None` | List of numeric values |
| `labels` | list \| None | `None` | List of category labels |
| `title` | str \| None | `None` | Optional chart title |
| `width` | int | `400` | SVG width (default: 400) |
| `height` | int | `250` | SVG height (default: 250) |
| `color` | str | `''` | Bar fill color |
| `show_values` | bool | `True` | Show value labels above bars |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Bottom Sheet

Style-agnostic bottom sheet / drawer component.

`python` · Layout · `from djust.components import BottomSheet` · [Open it live](https://djust.org/components/bottom_sheet/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | str | `''` | Sheet title text |
| `open` | bool | `False` | Whether the sheet is visible |
| `close_event` | str | `'close_sheet'` | djust event for closing |
| `custom_class` | str | `''` | Additional CSS classes |
| `content` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/breadcrumb/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list | *required* | list of dicts with keys: label, url, active (bool) |
| `separator` | str | `/` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_separator` | str | `None` | — |

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

```text
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](https://djust.org/components/breadcrumb_dropdown/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | List[dict] \| None | `None` | List of dicts with label, optional url. |
| `max_visible` | int | `4` | Max items before collapsing (default: 4). |
| `separator` | str | `'/'` | Separator character (default: "/"). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Button

Style-agnostic button component using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/button/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | *required* | — |
| `variant` | str | `primary` | Style variant (primary, secondary, danger, success, ghost, link, text) |
| `size` | str | `md` | Size variant (sm, md, lg) |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_icon` | str | `None` | — |
| `slot_content` | str | `None` | — |
| `slot_loading` | str | `None` | — |

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

```text
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](https://djust.org/components/calendar_heatmap/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | dict \| None | `None` | Dict mapping "YYYY-MM-DD" strings to numeric values |
| `year` | int \| None | `None` | Year to display (default: current year) |
| `title` | str \| None | `None` | Optional chart title |
| `color_empty` | str | `'#ebedf0'` | Color for zero-value cells (default: "#ebedf0") |
| `color_min` | str | `'#9be9a8'` | Color for low values (default: "#9be9a8") |
| `color_max` | str | `'#216e39'` | Color for high values (default: "#216e39") |
| `cell_size` | int | `12` | Cell width/height in px (default: 12) |
| `cell_gap` | int | `2` | Gap between cells in px (default: 2) |
| `show_month_labels` | bool | `True` | Show month labels (default: True) |
| `show_day_labels` | bool | `True` | Show day-of-week labels (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Calendar View

Month/week/day calendar view with event slots.

`python` · Charts · `from djust.components import CalendarView` · [Open it live](https://djust.org/components/calendar_view/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `events` | list \| None | `None` | List of dicts with `date` (YYYY-MM-DD), `title`, optional `color` |
| `month` | int | `1` | Month number (1-12) |
| `year` | int | `2026` | Four-digit year |
| `view` | str | `'month'` | "month", "week", or "day" (default: "month") |
| `start_day` | int | `0` | First day of week, 0=Mon 6=Sun (default: 0) |
| `event` | str | `''` | djust click event for day cells |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Callout

Callout/blockquote component.

`python` · Core UI · `from djust.components import Callout` · [Open it live](https://djust.org/components/callout/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | callout body (pre-rendered HTML) |
| `variant` | str | `'default'` | default, info, warning, danger, success |
| `title` | str | `''` | optional title text |
| `icon` | str | `''` | optional icon text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Card

Style-agnostic card container using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/card/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | str \| None | `None` | — |
| `content` | str | `` | Main card content (required) |
| `footer` | str \| None | `None` | Optional footer content |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_header` | str | `None` | — |
| `slot_body` | str | `None` | — |
| `slot_footer` | str | `None` | — |

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

```text
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](https://djust.org/components/carousel/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `images` | list \| None | `None` | list of dicts with keys: src, alt, caption |
| `active` | int | `0` | 0-based index of active slide prev_event, next_event, go_event: dj-click events |
| `prev_event` | str | `'carousel_prev'` | — |
| `next_event` | str | `'carousel_next'` | — |
| `go_event` | str | `'carousel_go'` | — |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/chat_bubble/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | Dict \| None | `None` | Dict with keys: sender, name, text, time, avatar (optional), status (optional). sender="user" renders right-aligned; anything else renders left-aligned. status can be: "sending", "sent", "delivered", "read", "error". |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Checkbox

`template` · Core UI · [Open it live](https://djust.org/components/checkbox/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | *required* | — |
| `label` | str | `` | — |
| `description` | str \| None | `None` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_description` | str | `None` | — |

**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](https://djust.org/components/code_block/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | str | `''` | source code text |
| `language` | str | `''` | programming language |
| `filename` | str | `''` | optional filename display |
| `theme` | str | `'github-dark'` | highlight.js theme name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Code Snippet

Code block with copy button and language badge.

`python` · Core UI · `from djust.components import CodeSnippet` · [Open it live](https://djust.org/components/code_snippet/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | str | `''` | The source code text |
| `language` | str | `''` | Programming language label (e.g. "python", "bash") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/collab_selection/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `users` | List[Union[dict, object]] \| None | `None` | List of user dicts with name, color, and selection data. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Collapsible

Collapsible/expandable section component.

`python` · Core UI · `from djust.components import Collapsible` · [Open it live](https://djust.org/components/collapsible/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | str | `'Toggle'` | trigger button text |
| `content` | str | `''` | collapsible body (pre-rendered HTML) |
| `is_open` | bool | `False` | whether section is open |
| `event` | str | `'toggle_collapsible'` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/color_picker/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `value` | str | `'#3B82F6'` | current hex color value |
| `event` | str | `''` | dj-click/dj-input event name |
| `label` | str | `''` | label text |
| `swatches` | list \| None | `None` | list of hex color strings |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `set_color`.

### Combobox

Searchable select (combobox) component.

`python` · Forms · `from djust.components import Combobox` · [Open it live](https://djust.org/components/combobox/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `label` | str | `''` | label text |
| `value` | str | `''` | currently selected value |
| `options` | list \| None | `None` | list of dicts with keys: value, label |
| `event` | str | `''` | dj-change event name |
| `search_event` | str | `''` | dj-input event for search |
| `placeholder` | str | `'Search...'` | search input placeholder |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/command_palette/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | results content (pre-rendered HTML) |
| `is_open` | bool | `False` | whether palette is open |
| `search_event` | str | `'palette_search'` | dj-input event for search |
| `close_event` | str | `'close_palette'` | dj-click event to close |
| `placeholder` | str | `'Search commands...'` | search input placeholder |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/comparison_table/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `plans` | list \| None | `None` | List of dicts with `name`, optional `price`, `highlighted` |
| `features` | list \| None | `None` | List of dicts with `name` and `values` (list matching plans order). Boolean values render as check/cross marks. |
| `event` | str | `''` | djust click event for plan selection |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Connection Status

Slim bar showing WebSocket state.

`python` · Feedback · `from djust.components import ConnectionStatus` · [Open it live](https://djust.org/components/connection_status/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `reconnecting_text` | str | `'Reconnecting...'` | Text shown while reconnecting |
| `connected_text` | str | `'Reconnected'` | Text shown briefly after reconnection |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/content_loader/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `loading_event` | str | `'data_loaded'` | Server event name that signals content is ready |
| `loaded` | bool | `False` | Whether content has loaded (default: False) |
| `placeholder` | str | `''` | HTML string to show while loading (e.g. skeleton) |
| `content` | str | `''` | Actual content to show when loaded |
| `error` | str | `''` | Error message to display if loading failed |
| `error_event` | str | `''` | Optional event name for retry action |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Context Menu

Context menu (right-click menu) component.

`python` · Advanced · `from djust.components import ContextMenu` · [Open it live](https://djust.org/components/context_menu/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | `'Right-click area'` | trigger area text |
| `content` | str | `''` | menu items (pre-rendered HTML) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Conversation Thread

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

`python` · Advanced · `from djust.components import ConversationThread` · [Open it live](https://djust.org/components/conversation_thread/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `messages` | List[Dict] \| None | `None` | List of message dicts with keys: sender, name, text, time |
| `stream_event` | str | `'new_message'` | WebSocket event name for incoming messages |
| `streaming` | bool | `False` | Whether the AI is currently streaming a response |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Cookie Consent

Style-agnostic cookie consent banner.

`python` · Advanced · `from djust.components import CookieConsent` · [Open it live](https://djust.org/components/cookie_consent/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | str | `'We use cookies to improve your experience.'` | Consent message text |
| `accept_event` | str | `'accept_cookies'` | djust event for accepting cookies |
| `reject_event` | str | `''` | djust event for rejecting cookies (optional) |
| `accept_label` | str | `'Accept'` | Accept button text (default: "Accept") |
| `reject_label` | str | `'Decline'` | Reject button text (default: "Decline") |
| `privacy_url` | str | `''` | Link to privacy policy |
| `show_reject` | bool | `True` | Show reject button (default: True) |
| `position` | str | `'bottom'` | Position variant (bottom, top) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/copy_button/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | `''` | text to copy |
| `label` | str | `'Copy'` | button label |
| `copied_label` | str | `'Copied!'` | label shown after copying |
| `variant` | str | `'outline'` | button style variant |
| `size` | str | `'sm'` | button size |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Copyable Text

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

`python` · Advanced · `from djust.components import CopyableText` · [Open it live](https://djust.org/components/copyable_text/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | `''` | The text to display and copy |
| `copied_label` | str | `'Copied!'` | Label shown after copy (default "Copied!") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/countdown/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `target` | str | `''` | ISO 8601 datetime string for countdown target |
| `event` | str | `''` | djust event to fire when countdown reaches zero |
| `show_days` | bool | `True` | Show days segment (default: True) |
| `show_seconds` | bool | `True` | Show seconds segment (default: True) |
| `labels` | dict \| None | `None` | Dict of custom labels for segments |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/cron_input/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'cron'` | Form field name. |
| `value` | str | `'* * * * *'` | Cron expression string (default: "* * * * *"). |
| `event` | str | `''` | Event fired on change. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Currency Input

Numeric input with currency symbol prefix and formatting hints.

`python` · Forms · `from djust.components import CurrencyInput` · [Open it live](https://djust.org/components/currency_input/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | Form field name. |
| `currency` | str | `'USD'` | Currency code (USD, EUR, GBP, etc.). |
| `value` | str | `''` | Current numeric value. |
| `label` | str | `''` | Optional label text. |
| `min` | float \| None | `None` | Minimum value. |
| `max` | float \| None | `None` | Maximum value. |
| `step` | str | `'0.01'` | Step increment (default 0.01). |
| `placeholder` | str | `'0.00'` | Placeholder text. |
| `event` | str | `''` | dj-input event name. |
| `disabled` | bool | `False` | Whether the input is disabled. |
| `required` | bool | `False` | Whether the field is required. |
| `error` | str | `''` | Error message to display. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Cursors Overlay

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

`python` · Advanced · `from djust.components import CursorsOverlay` · [Open it live](https://djust.org/components/cursors_overlay/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `users` | List[Union[dict, object]] \| None | `None` | List of user dicts with name, color, x, y. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

## D

### Dashboard Grid

CSS Grid layout with draggable and resizable dashboard panels.

`python` · Layout · `from djust.components import DashboardGrid` · [Open it live](https://djust.org/components/dashboard_grid/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `panels` | list \| None | `None` | list of panel dicts with id, title, col, row, width, height, content |
| `columns` | int | `4` | number of grid columns (default 4) |
| `row_height` | str | `'200px'` | CSS row height (default "200px") |
| `gap` | str | `'1rem'` | CSS gap (default "1rem") |
| `move_event` | str | `'dashboard_move'` | djust event on panel drag |
| `resize_event` | str | `'dashboard_resize'` | djust event on panel resize |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Data Card Grid

Filterable card grid layout.

`python` · Data Display · `from djust.components import DataCardGrid` · [Open it live](https://djust.org/components/data_card_grid/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | List[dict] \| None | `None` | List of item dicts with title, description, category, image, url. |
| `columns` | int | `3` | Number of columns (default: 3). |
| `filter_key` | str | `'category'` | Key in items used for filtering (default: "category"). |
| `event` | str | `''` | Event fired on card click. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Data Grid

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

`python` · Data Display · `from djust.components import DataGrid` · [Open it live](https://djust.org/components/data_grid/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | list \| None | `None` | list of dicts with keys: key, label, width (opt), editable (bool, default True), type (text\|number\|select), options (for select type) |
| `rows` | list \| None | `None` | list of dicts keyed by column keys |
| `row_key` | str | `'id'` | key field for row identity |
| `edit_event` | str | `'grid_cell_edit'` | dj-click event on cell edit commit |
| `resizable` | bool | `True` | enable column resize handles |
| `frozen_left` | int | `0` | columns frozen on the left |
| `frozen_right` | int | `0` | columns frozen on the right |
| `striped` | bool | `False` | alternating row backgrounds |
| `compact` | bool | `False` | reduced cell padding |
| `keyboard_nav` | bool | `True` | enable arrow-key cell navigation |
| `new_row_event` | str | `''` | event for Add Row button |
| `delete_row_event` | str | `''` | event for row deletion |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/data_table/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | list \| None | `None` | list of dicts with keys: key, label |
| `rows` | list \| None | `None` | list of dicts keyed by column keys |
| `sort_by` | str | `''` | column key to sort by |
| `sort_desc` | bool | `False` | sort descending |
| `sort_event` | str | `'on_table_sort'` | dj-click event for sorting |
| `striped` | bool | `False` | alternating row backgrounds |
| `compact` | bool | `False` | reduced padding |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/date_picker/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'date'` | form field name |
| `label` | str | `''` | label text |
| `selected` | str | `''` | selected date (YYYY-MM-DD) |
| `year` | int | `0` | display year |
| `month` | int | `0` | display month prev_event, next_event, select_event: dj-click events |
| `prev_event` | str | `'date_prev_month'` | — |
| `next_event` | str | `'date_next_month'` | — |
| `select_event` | str | `'date_select'` | — |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/dependent_select/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | Form field name. |
| `parent` | str | `''` | Name of the parent field this select depends on. |
| `source_event` | str | `''` | djust event to fire when parent changes. |
| `label` | str | `''` | Optional label text. |
| `placeholder` | str | `'Select...'` | Placeholder text when nothing selected. |
| `value` | str | `''` | Currently selected value. |
| `options` | list \| None | `None` | List of dicts with 'value'/'label' keys, or list of strings. |
| `loading` | bool | `False` | Show spinner while loading options. |
| `disabled` | bool | `False` | Whether the select is disabled. |
| `required` | bool | `False` | Whether the field is required. |
| `error` | str | `''` | Error message to display. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Description List

Description list (term/detail pairs) component.

`python` · Data Display · `from djust.components import DescriptionList` · [Open it live](https://djust.org/components/description_list/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: term, detail |
| `layout` | str | `'vertical'` | vertical, horizontal |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Diff Viewer

Side-by-side or unified text diff viewer.

`python` · Data Display · `from djust.components import DiffViewer` · [Open it live](https://djust.org/components/diff_viewer/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `old` | str | `''` | Original text |
| `new` | str | `''` | Modified text |
| `mode` | str | `'split'` | "split" or "unified" (default: "split") |
| `title_old` | str | `'Original'` | Label for old pane (default: "Original") |
| `title_new` | str | `'Modified'` | Label for new pane (default: "Modified") |
| `show_line_numbers` | bool | `True` | Show line numbers (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Dropdown

Dropdown menu component.

`template` · Core UI · [Open it live](https://djust.org/components/dropdown/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | str | *required* | — |
| `label` | str | *required* | trigger button text |
| `align` | str | `left` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_trigger` | str | `None` | — |
| `slot_menu` | str | `None` | — |

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

```text
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](https://djust.org/components/dropdown_menu/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | `'Menu'` | Trigger button label |
| `items` | list \| None | `None` | List of menu item dicts |
| `open` | bool | `False` | Whether the menu is expanded |
| `toggle_event` | str | `'toggle_menu'` | djust event for toggling open/close |
| `align` | str | `'left'` | Menu alignment (left, right) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/empty_state/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | str | `''` | heading text |
| `description` | str | `''` | descriptive text |
| `icon` | str | `''` | optional icon |
| `action_label` | str | `''` | CTA button text |
| `action_event` | str | `''` | dj-click event for CTA |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Error Boundary

Style-agnostic error boundary component.

`python` · Feedback · `from djust.components import ErrorBoundary` · [Open it live](https://djust.org/components/error_boundary/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `fallback` | str | `'Something went wrong'` | Fallback message to show on error |
| `error` | str | `''` | Current error message (empty = no error) |
| `retry_event` | str | `''` | djust event for retrying |
| `custom_class` | str | `''` | Additional CSS classes |
| `content` | str | `''` | What to show while there is no error — plain text, escaped |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Error Page

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

`python` · Feedback · `from djust.components import ErrorPage` · [Open it live](https://djust.org/components/error_page/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | int | `500` | HTTP error code (e.g. 404, 500). |
| `title` | str | `'Something went wrong'` | Error title. |
| `message` | str | `''` | Error description. |
| `action_url` | str | `'/'` | URL for the action button. |
| `action_label` | str | `'Go Home'` | Label for the action button. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Expandable Text

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

`python` · Data Display · `from djust.components import ExpandableText` · [Open it live](https://djust.org/components/expandable_text/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | `''` | Text content to display |
| `max_lines` | int | `3` | Maximum visible lines when collapsed (default: 3) |
| `expanded` | bool | `False` | Whether text is currently expanded (default: False) |
| `toggle_event` | str | `'toggle_expand'` | djust event to toggle expanded state |
| `more_label` | str | `'Read more'` | Label for expand action (default: "Read more") |
| `less_label` | str | `'Show less'` | Label for collapse action (default: "Show less") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/export_dialog/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `formats` | list \| None | `None` | List of available export formats |
| `columns` | list \| None | `None` | List of column dicts with id, label, checked |
| `event` | str | `'export'` | djust event for triggering export |
| `open` | bool | `False` | Whether the dialog is visible |
| `close_event` | str | `'close_export'` | djust event for closing |
| `selected_format` | str | `''` | Currently selected format |
| `title` | str | `'Export Data'` | Dialog title |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/fab/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | str | `'+'` | icon text/emoji |
| `event` | str | `''` | dj-click event name |
| `position` | str | `'bottom-right'` | bottom-right, bottom-left, top-right, top-left |
| `label` | str | `''` | accessible label |
| `size` | str | `'md'` | sm, md, lg |
| `variant` | str | `'primary'` | primary, secondary, danger, success |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Feedback Widget

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

`python` · Advanced · `from djust.components import FeedbackWidget` · [Open it live](https://djust.org/components/feedback_widget/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `event` | str | `'rate_response'` | djust event fired with rating value |
| `mode` | str | `'thumbs'` | Rating mode (thumbs, stars, emoji) |
| `value` | str \| None | `None` | Current selected value (for thumbs: "up"/"down", stars: 1-5, emoji: the emoji) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/fieldset/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | fieldset content (pre-rendered HTML) |
| `legend` | str | `''` | legend text |
| `disabled` | bool | `False` | whether fieldset is disabled |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### File Dropzone

Drag-and-drop file upload zone component.

`python` · Media · `from djust.components import FileDropzone` · [Open it live](https://djust.org/components/file_dropzone/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'file'` | file input name |
| `label` | str | `''` | label text |
| `accept` | str | `''` | accepted file types |
| `multiple` | bool | `False` | allow multiple files |
| `max_size_mb` | int | `10` | max file size in MB |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### File Tree

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

`python` · Media · `from djust.components import FileTree` · [Open it live](https://djust.org/components/file_tree/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `nodes` | list \| None | `None` | list of node dicts with name, type (file/folder), children |
| `selected` | str | `''` | name/path of currently selected file |
| `event` | str | `'select_file'` | djust event fired on file selection |
| `show_icons` | bool | `True` | show file/folder icons (default True) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Filter Bar

Filter bar component with filter controls.

`python` · Advanced · `from djust.components import FilterBar` · [Open it live](https://djust.org/components/filter_bar/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | filter controls (pre-rendered HTML) |
| `clear_event` | str | `'clear_filters'` | dj-click event for clearing filters |
| `active_count` | int | `0` | number of active filters |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/form_array/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'items'` | Field name prefix |
| `rows` | list \| None | `None` | List of row dicts with values |
| `min` | int | `1` | Minimum number of rows (default: 1) |
| `max` | int | `10` | Maximum number of rows (default: 10) |
| `add_event` | str | `'add_row'` | djust event for adding a row |
| `remove_event` | str | `'remove_row'` | djust event for removing a row |
| `add_label` | str | `'Add row'` | Add button text |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/form_group/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | form field content (pre-rendered HTML) |
| `label` | str | `''` | label text |
| `error` | str | `''` | error message |
| `helper` | str | `''` | helper text |
| `required` | bool | `False` | whether field is required |
| `for_input` | str | `''` | id of the associated input |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Form Validation

Renders inline validation error for a single form field.

`python` · Forms · `from djust.components import FieldError, FormErrors` · [Open it live](https://djust.org/components/form_validation/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `field` | Any | `None` | A Django BoundField instance. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## G

### Gantt Chart

SVG Gantt chart for project management timelines.

`python` · Charts · `from djust.components import GanttChart` · [Open it live](https://djust.org/components/gantt_chart/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `tasks` | list \| None | `None` | List of dicts with `name`, `start` (unit offset), `duration` (units), optional `color`, `progress` (0-1) |
| `title` | str \| None | `None` | Optional chart title |
| `unit_label` | str | `'Day'` | Label for time units (default: "Day") |
| `units` | int \| None | `None` | Number of time units to display (auto-calculated if omitted) |
| `row_height` | int | `32` | Height per row in px (default: 32) |
| `width` | int | `600` | SVG width (default: 600) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Gauge

SVG donut/gauge chart component.

`python` · Charts · `from djust.components import Gauge` · [Open it live](https://djust.org/components/gauge/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | float | `0` | current value |
| `max_value` | float | `100` | maximum value |
| `label` | str | `''` | text label below gauge |
| `color` | str | `'primary'` | color variant (primary, success, warning, danger) |
| `size` | str | `'md'` | sm, md, lg |
| `show_value` | bool | `True` | whether to show percentage text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## H

### Heatmap

Style-agnostic SVG heatmap using CSS custom properties.

`python` · Charts · `from djust.components import Heatmap` · [Open it live](https://djust.org/components/heatmap/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | list \| None | `None` | 2D list (rows of columns) of numeric values |
| `x_labels` | list \| None | `None` | Column header labels |
| `y_labels` | list \| None | `None` | Row header labels |
| `title` | str \| None | `None` | Optional chart title |
| `color_min` | str | `'#f0f9ff'` | Color for minimum value (default: "#f0f9ff") |
| `color_max` | str | `'#1e40af'` | Color for maximum value (default: "#1e40af") |
| `cell_size` | int | `36` | Cell width/height in px (default: 36) |
| `show_values` | bool | `True` | Show numeric values in cells (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Hover Card

Style-agnostic hover card using CSS custom properties.

`python` · Layout · `from djust.components import HoverCard` · [Open it live](https://djust.org/components/hover_card/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | str | `''` | Text or HTML for the trigger element. |
| `content` | str | `''` | HTML content for the card body. |
| `position` | str | `'bottom'` | Placement relative to trigger (top, bottom, left, right). |
| `delay_in` | int | `200` | Hover delay before showing (ms, default 200). |
| `delay_out` | int | `300` | Delay before hiding after mouse leaves (ms, default 300). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## I

### Icon

Icon component wrapper.

`python` · Advanced · `from djust.components import Icon` · [Open it live](https://djust.org/components/icon/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | icon name |
| `size` | str | `'md'` | xs, sm, md, lg |
| `icon_set` | str | `'heroicons'` | icon set name (default heroicons) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Image Cropper

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

`python` · Media · `from djust.components import ImageCropper` · [Open it live](https://djust.org/components/image_cropper/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | str | `''` | image URL to crop |
| `crop_event` | str | `'save_crop'` | djust event fired with crop data (x, y, width, height) |
| `aspect_ratio` | str | `''` | lock ratio (e.g. "1/1", "16/9", "4/3"), empty = free |
| `min_width` | int | `50` | minimum crop width in px (default 50) |
| `min_height` | int | `50` | minimum crop height in px (default 50) |
| `disabled` | bool | `False` | disable cropping (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Image Lightbox

Full-screen image viewer overlay with navigation.

`python` · Media · `from djust.components import ImageLightbox` · [Open it live](https://djust.org/components/image_lightbox/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `images` | list \| None | `None` | list of dicts with `src` and optional `alt`/`caption` |
| `active` | int | `0` | index of currently displayed image (default 0) |
| `open` | bool | `False` | whether lightbox is visible (default False) |
| `close_event` | str | `'close_lightbox'` | djust event to close (default "close_lightbox") |
| `navigate_event` | str | `'lightbox_navigate'` | djust event on nav (default "lightbox_navigate") |
| `show_counter` | bool | `True` | show "N of M" counter (default True) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Image Upload Preview

Multi-image upload with thumbnail preview.

`python` · Media · `from djust.components import ImageUploadPreview` · [Open it live](https://djust.org/components/image_upload_preview/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'images'` | Form field name. |
| `max` | int | `5` | Maximum number of images. |
| `event` | str | `'upload'` | Event fired on file selection. |
| `accept` | str | `'image/*'` | Accepted MIME types (default: image/*). |
| `previews` | list \| None | `None` | List of existing preview URLs. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Import Wizard

Style-agnostic import wizard component.

`python` · Advanced · `from djust.components import ImportWizard` · [Open it live](https://djust.org/components/import_wizard/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `accepted_formats` | str | `'.csv'` | Comma-separated accepted file extensions |
| `model_fields` | list \| None | `None` | List of field dicts with id, label |
| `event` | str | `'import_data'` | djust event for triggering import |
| `step` | str | `'upload'` | Current wizard step (upload, map, preview) |
| `upload_event` | str | `'upload_file'` | djust event for file upload |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/infinite_scroll/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `load_event` | str | `'load_more'` | djust event to fire when threshold is reached |
| `threshold` | str | `'200px'` | Distance from bottom to trigger (default: "200px") |
| `loading` | bool | `False` | Whether currently loading more items |
| `finished` | bool | `False` | Whether all items have been loaded |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/inline_edit/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | str | `''` | current display value |
| `name` | str | `''` | field name |
| `event` | str | `''` | dj-input event name |
| `editing` | bool | `False` | whether currently in edit mode |
| `edit_event` | str | `'inline_edit'` | dj-click event to enter edit mode |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `inline_edit`.

### Input

`template` · Core UI · [Open it live](https://djust.org/components/input/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | *required* | — |
| `label` | str \| None | `None` | — |
| `placeholder` | str | `` | — |
| `type` | str | `text` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_input` | str | `None` | — |
| `slot_help_text` | str | `None` | — |
| `slot_error` | str | `None` | — |

**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](https://djust.org/components/input_group/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | input and addons (pre-rendered HTML) |
| `size` | str | `'md'` | sm, md, lg |
| `error` | str | `''` | error message |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## J

### Json Viewer

Interactive collapsible JSON tree viewer.

`python` · Data Display · `from djust.components import JsonViewer` · [Open it live](https://djust.org/components/json_viewer/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | object | `None` | JSON-serializable data (dict, list, string, number, etc.) |
| `collapsed_depth` | int | `2` | depth at which nodes start collapsed (default 2) |
| `root_label` | str | `'root'` | label for root node |
| `copy_button` | bool | `True` | show copy-to-clipboard button (default True) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

## K

### Kanban Board

Kanban board component.

`python` · Advanced · `from djust.components import KanbanBoard` · [Open it live](https://djust.org/components/kanban_board/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | list \| None | `None` | list of dicts with keys: id, title, color, cards (list of dicts) |
| `move_event` | str | `'kanban_move'` | dj-click event for drag-drop |
| `add_card_event` | str | `'kanban_add_card'` | dj-click event for adding cards |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/kbd/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | list \| None | `None` | list of key strings (e.g. ['Ctrl', 'K']) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## L

### Line Chart

Style-agnostic SVG line chart using CSS custom properties.

`python` · Charts · `from djust.components import LineChart` · [Open it live](https://djust.org/components/line_chart/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `series` | list \| None | `None` | List of series dicts with name, data, and optional color |
| `labels` | list \| None | `None` | List of x-axis labels |
| `title` | str \| None | `None` | Optional chart title |
| `width` | int | `400` | SVG width (default: 400) |
| `height` | int | `250` | SVG height (default: 250) |
| `area` | bool | `False` | Fill area under lines (default: False) |
| `show_dots` | bool | `True` | Show data point dots (default: True) |
| `show_legend` | bool | `True` | Show series legend (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Live Counter

Animated counter updating in real-time via WebSocket push.

`python` · Advanced · `from djust.components import LiveCounter` · [Open it live](https://djust.org/components/live_counter/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | int | `0` | Current counter value |
| `label` | str | `''` | Text label shown after the number |
| `stream_event` | str | `'counter_update'` | WebSocket event name for counter updates |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/live_indicator/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `user` | object \| None | `None` | Dict with name (and optional avatar) or string name. |
| `field` | str | `''` | Field name being edited. |
| `action` | str | `'typing'` | Action label (default: "typing"). |
| `active` | bool | `True` | Whether the indicator is visible (default: True). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Loading Overlay

Loading overlay component.

`python` · Feedback · `from djust.components import LoadingOverlay` · [Open it live](https://djust.org/components/loading_overlay/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | wrapped content (pre-rendered HTML) |
| `active` | bool | `False` | whether overlay is shown |
| `text` | str | `''` | loading message text |
| `spinner_size` | str | `'md'` | sm, md, lg |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Log Viewer

Monospace streaming log display with level coloring.

`python` · Data Display · `from djust.components import LogViewer` · [Open it live](https://djust.org/components/log_viewer/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `lines` | list \| None | `None` | list of log line strings |
| `stream_event` | str | `''` | djust event for receiving new log lines |
| `show_line_numbers` | bool | `True` | show line numbers (default True) |
| `auto_scroll` | bool | `True` | auto-scroll to bottom on new lines (default True) |
| `filter_level` | str | `''` | filter to specific level (info/warn/error/debug) |
| `wrap` | bool | `False` | wrap long lines (default False) |
| `max_lines` | int | `0` | maximum lines to display (0 = unlimited) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

## M

### Map Picker

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

`python` · Media · `from djust.components import MapPicker` · [Open it live](https://djust.org/components/map_picker/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `lat` | float | `0.0` | Latitude of the marker. |
| `lng` | float | `0.0` | Longitude of the marker. |
| `pick_event` | str | `'set_location'` | Event name fired on map click. |
| `zoom` | int | `13` | Map zoom level (default: 13). |
| `height` | str | `'400px'` | Map height CSS value. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Markdown

Render Markdown text as sanitized HTML.

`python` · Data Display · `from djust.components import Markdown` · [Open it live](https://djust.org/components/markdown/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | `''` | Markdown source text to render. |
| `custom_class` | str | `''` | Additional CSS classes to add to the wrapper div. |
| `extensions` | list \| None | `None` | List of markdown extensions. Defaults to `["fenced_code", "tables", "nl2br"]`. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Markdown Editor

Split-pane markdown editor with live preview.

`python` · Advanced · `from djust.components import MarkdownEditor` · [Open it live](https://djust.org/components/markdown_editor/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'content'` | form field name |
| `value` | str | `''` | initial markdown content |
| `preview` | bool | `True` | show preview pane (default True) |
| `toolbar` | bool | `True` | show formatting toolbar (default True) |
| `placeholder` | str | `'Write markdown...'` | textarea placeholder text |
| `rows` | int | `12` | textarea rows |
| `disabled` | bool | `False` | disable editing |
| `event` | str | `''` | djust event on change |
| `custom_class` | str | `''` | additional CSS classes |
| `mode` | str | `'markdown'` | initial editing mode; visual requires the optional visual bundle |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/markdown_textarea/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'content'` | Form field name |
| `value` | str | `''` | Current textarea content |
| `preview` | bool | `False` | Whether preview mode is active (default: False) |
| `toggle_event` | str | `'toggle_preview'` | djust event to toggle preview mode |
| `placeholder` | str | `'Write markdown here...'` | Placeholder text |
| `rows` | int | `6` | Number of textarea rows (default: 6) |
| `disabled` | bool | `False` | Whether the textarea is disabled |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/masonry_grid/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | List of dicts with `content` (HTML string), optional `height`, `class` |
| `columns` | int | `3` | Number of columns (default: 3) |
| `gap` | int | `16` | Gap between items in px (default: 16) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Mentions Input

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

`python` · Forms · `from djust.components import MentionsInput` · [Open it live](https://djust.org/components/mentions_input/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'message'` | Input field name attribute. |
| `users` | List[dict] \| None | `None` | List of user dicts with id, name, and optional avatar. |
| `event` | str | `'send'` | Event name fired on submit (default: "send"). |
| `placeholder` | str | `'Type @ to mention...'` | Placeholder text. |
| `disabled` | bool | `False` | Whether the input is disabled. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](/guides/hooks/)).

### Meter

Style-agnostic meter / stacked progress component.

`python` · Core UI · `from djust.components import Meter` · [Open it live](https://djust.org/components/meter/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `segments` | list \| None | `None` | List of segment dicts with value, color, label |
| `total` | int | `100` | Total value (default: 100) |
| `label` | str | `''` | Overall meter label |
| `show_legend` | bool | `True` | Show color legend below bar (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Modal

Modal dialog overlay component.

`template` · Core UI · [Open it live](https://djust.org/components/modal/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | str | *required* | — |
| `title` | str \| None | `None` | — |
| `size` | str | `md` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_header` | str | `None` | — |
| `slot_body` | str | `None` | — |
| `slot_footer` | str | `None` | — |
| `slot_close` | str | `None` | — |

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

```text
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](https://djust.org/components/model_selector/)

```text
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)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'model'` | Form field name |
| `options` | list \| None | `None` | List of model option dicts (value, label, description, context_window, tier) |
| `value` | str | `''` | Currently selected model value |
| `event` | str | `'select_model'` | djust event fired on selection |
| `toggle_event` | str | `'toggle_model_selector'` | djust event fired when the trigger is clicked. The host owns `is_open` — this component renders it, it does not track it. |
| `is_open` | bool | `False` | Whether the option list is showing |
| `placeholder` | str | `'Select a model...'` | Placeholder text |
| `disabled` | bool | `False` | Whether selector is disabled |
| `label` | str | `''` | Optional label text |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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](https://djust.org/components/multi_select/)

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

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `label` | str | `''` | label text |
| `options` | list \| None | `None` | list of dicts with keys: value, label |
| `selected` | list \| None | `None` | list of currently selected values |
| `event` | str | `''` | dj-change event name. Each box sends `option` (its value) and `value` (whether it is now ticked):: @event_handler() def set_frameworks(self, option, value, **kwargs): picked = [s for s in self.picker.selected if s != option] self.picker.selected = picked + [option] if value else picked |
| `placeholder` | str | `'Search...'` | — |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `set_frameworks`.

### Multimodal Input

Text area with optional file attachment and voice input buttons.

`python` · Advanced · `from djust.components import MultimodalInput` · [Open it live](https://djust.org/components/multimodal_input/)

```text
MultimodalInput(name='message', event='send', placeholder='Type a message...', accept_files=False, accept_voice=False, file_accept='*/*', disabled=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'message'` | Form field name for the text input |
| `event` | str | `'send'` | djust event fired on send |
| `placeholder` | str | `'Type a message...'` | Placeholder text for the textarea |
| `accept_files` | bool | `False` | Whether to show file attachment button |
| `accept_voice` | bool | `False` | Whether to show voice input button |
| `file_accept` | str | `'*/*'` | MIME types for file input (default: "*/*") |
| `disabled` | bool | `False` | Whether the input is disabled |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `send`.

## N

### Nav

`template` · Navigation · [Open it live](https://djust.org/components/nav/)

```text
{% theme_nav brand=... items=... css_prefix=... attrs=... slot_brand=... slot_items=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | str \| None | `None` | — |
| `items` | list | `None` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_brand` | str | `None` | — |
| `slot_items` | str | `None` | — |
| `slot_actions` | str | `None` | — |

**Slots:** `slot_brand`, `slot_items`, `slot_actions`

**Accessibility:** Nav must have role=navigation; Nav must have aria-label.

### Nav Group

`template` · Navigation · [Open it live](https://djust.org/components/nav_group/)

```text
{% theme_nav_group label=... items=... icon=... expanded=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | *required* | — |
| `items` | list | `None` | — |
| `icon` | str \| None | `None` | — |
| `expanded` | bool | `True` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_items` | str | `None` | — |

**Slots:** `slot_label`, `slot_items`

### Nav Item

`template` · Navigation · [Open it live](https://djust.org/components/nav_item/)

```text
{% theme_nav_item label=... url=... icon=... active=... badge=... css_prefix=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | *required* | — |
| `url` | str | *required* | — |
| `icon` | str \| None | `None` | — |
| `active` | bool \| None | `None` | — |
| `badge` | str \| None | `None` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_icon` | str | `None` | — |
| `slot_badge` | str | `None` | — |

**Slots:** `slot_icon`, `slot_badge`

**Accessibility:** Active nav item must have aria-current=page.

### Nav Menu

Horizontal navigation menu component.

`python` · Navigation · `from djust.components import NavMenu` · [Open it live](https://djust.org/components/nav_menu/)

```text
NavMenu(items=None, brand='', brand_href='/', content='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: label, href, active (bool) |
| `brand` | str | `''` | brand/logo text |
| `brand_href` | str | `'/'` | brand link URL |
| `content` | str | `''` | pre-rendered HTML content (alternative to items) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Notification Badge

Style-agnostic notification badge using CSS custom properties.

`python` · Feedback · `from djust.components import NotificationBadge` · [Open it live](https://djust.org/components/notification_badge/)

```text
NotificationBadge(count=0, max_count=99, dot=False, pulse=False, size='md', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | int | `0` | Number to display |
| `max_count` | int | `99` | Maximum count before showing "N+" (default: 99) |
| `dot` | bool | `False` | Show as a dot with no text (default: False) |
| `pulse` | bool | `False` | Animate with pulse (default: False) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Notification Center

Notification bell with dropdown list component.

`python` · Feedback · `from djust.components import NotificationCenter` · [Open it live](https://djust.org/components/notification_center/)

```text
NotificationCenter(notifications=None, unread_count=0, open_event='toggle_notifications', mark_read_event='mark_notification_read', clear_event='clear_notifications', custom_class='', is_open=False, **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `notifications` | list \| None | `None` | list of dicts with keys: id, message, time, unread |
| `unread_count` | int | `0` | number of unread notifications open_event, mark_read_event, clear_event: dj-click events |
| `open_event` | str | `'toggle_notifications'` | — |
| `mark_read_event` | str | `'mark_notification_read'` | — |
| `clear_event` | str | `'clear_notifications'` | — |
| `custom_class` | str | `''` | — |
| `is_open` | bool | `False` | whether the dropdown is shown; flip it in your `open_event` handler (`self.bell.is_open = not self.bell.is_open`) |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `toggle_notifications`, `mark_notification_read`, `clear_notifications`. Give the component a `name` when a page holds more than one; the handler receives it as `name`.

### Notification Popover

Style-agnostic notification popover using CSS custom properties.

`python` · Feedback · `from djust.components import NotificationPopover` · [Open it live](https://djust.org/components/notification_popover/)

```text
NotificationPopover(notifications=None, unread_count=0, mark_read_event='mark_read', toggle_event='toggle_notifications', is_open=False, title='Notifications', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `notifications` | List[Union[dict, object]] \| None | `None` | List of notification dicts with id, title, body, time, read. |
| `unread_count` | int | `0` | Number of unread notifications (shown on badge). |
| `mark_read_event` | str | `'mark_read'` | djust event fired when an unread item is clicked. |
| `toggle_event` | str | `'toggle_notifications'` | djust event to open/close popover. |
| `is_open` | bool | `False` | Whether the popover is open. |
| `title` | str | `'Notifications'` | Header text (default "Notifications"). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Number Stepper

Numeric +/- stepper input component.

`python` · Forms · `from djust.components import NumberStepper` · [Open it live](https://djust.org/components/number_stepper/)

```text
NumberStepper(name='', value=0, min_val=None, max_val=None, step=1, event='', label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `value` | int | `0` | current value |
| `min_val` | int \| None | `None` | minimum value |
| `max_val` | int \| None | `None` | maximum value |
| `step` | int | `1` | increment amount |
| `event` | str | `''` | dj-click event name |
| `label` | str | `''` | label text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## O

### Org Chart

Hierarchical org chart / tree visualization.

`python` · Media · `from djust.components import OrgChart` · [Open it live](https://djust.org/components/org_chart/)

```text
OrgChart(nodes=None, root=None, event='', direction='vertical', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `nodes` | list \| None | `None` | List of dicts with `id`, `name`, `title`, optional `parent`, `avatar` |
| `root` | str \| None | `None` | ID of root node (auto-detected if omitted) |
| `event` | str | `''` | djust click event for node selection |
| `direction` | str | `'vertical'` | "vertical" (default) or "horizontal" |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Otp Input

One-time code input component.

`python` · Forms · `from djust.components import OtpInput` · [Open it live](https://djust.org/components/otp_input/)

```text
OtpInput(name='', digits=6, event='', label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `digits` | int | `6` | number of digit boxes |
| `event` | str | `''` | dj-change event name |
| `label` | str | `''` | label text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `verify_code`.

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

## P

### Page Alert

Style-agnostic full-width page alert / banner component.

`python` · Feedback · `from djust.components import PageAlert` · [Open it live](https://djust.org/components/page_alert/)

```text
PageAlert(message='', type='info', dismissible=False, dismiss_event='dismiss_alert', icon='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | str | `''` | Alert message text |
| `type` | str | `'info'` | Alert type (info, success, warning, error) |
| `dismissible` | bool | `False` | Whether the alert can be dismissed |
| `dismiss_event` | str | `'dismiss_alert'` | djust event for dismissing |
| `icon` | str | `''` | Optional icon/emoji |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Page Header

Page-level header with title, subtitle, and optional actions.

`python` · Layout · `from djust.components import PageHeader` · [Open it live](https://djust.org/components/page_header/)

```text
PageHeader(title='', subtitle='', description='', actions='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | str | `''` | page title |
| `subtitle` | str | `''` | subtitle text |
| `description` | str | `''` | description text |
| `actions` | str | `''` | pre-rendered HTML for action buttons (caller's responsibility) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Pagination

Pagination controls component.

`template` · Core UI · [Open it live](https://djust.org/components/pagination/)

```text
{% theme_pagination current_page=... total_pages=... url_pattern=... show_edges=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `current_page` | int | *required* | — |
| `total_pages` | int | *required* | total number of pages |
| `url_pattern` | str | *required* | — |
| `show_edges` | bool | `True` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_prev` | str | `None` | — |
| `slot_next` | str | `None` | — |

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

```text
Pagination(page=1, total_pages=1, prev_event='page_prev', next_event='page_next', custom_class='', **kwargs)
```

**Slots:** `slot_prev`, `slot_next`

**Accessibility:** Pagination nav must have aria-label.

### Pie Chart

Style-agnostic SVG pie/donut chart using CSS custom properties.

`python` · Charts · `from djust.components import PieChart` · [Open it live](https://djust.org/components/pie_chart/)

```text
PieChart(segments=None, title=None, width=300, height=300, donut=False, inner_radius=0.6, show_labels=True, show_legend=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `segments` | list \| None | `None` | List of segment dicts with label, value, and optional color |
| `title` | str \| None | `None` | Optional chart title |
| `width` | int | `300` | SVG width (default: 300) |
| `height` | int | `300` | SVG height (default: 300) |
| `donut` | bool | `False` | Render as donut chart (default: False) |
| `inner_radius` | float | `0.6` | Inner radius ratio for donut (0-1, default: 0.6) |
| `show_labels` | bool | `True` | Show percentage labels (default: True) |
| `show_legend` | bool | `True` | Show legend below chart (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Pivot Table

Configurable pivot table that aggregates data by row/column dimensions.

`python` · Data Display · `from djust.components import PivotTable` · [Open it live](https://djust.org/components/pivot_table/)

```text
PivotTable(data=None, rows='', cols='', values='', agg='sum', title=None, show_totals=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | list \| None | `None` | List of dicts (flat records) |
| `rows` | str | `''` | Field name for row grouping |
| `cols` | str | `''` | Field name for column grouping |
| `values` | str | `''` | Field name for the numeric value |
| `agg` | str | `'sum'` | Aggregation function — "sum", "avg", "count", "min", "max" (default: "sum") |
| `title` | str \| None | `None` | Optional table title |
| `show_totals` | bool | `True` | Show row/column totals (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Popover

Popover overlay component.

`python` · Core UI · `from djust.components import Popover` · [Open it live](https://djust.org/components/popover/)

```text
Popover(trigger='Click me', content='', title='', placement='bottom', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | str | `'Click me'` | trigger button text |
| `content` | str | `''` | popover body (pre-rendered HTML) |
| `title` | str | `''` | optional popover title |
| `placement` | str | `'bottom'` | bottom, top, left, right |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Presence Avatars

Stacked avatar group showing online/present users with status dots.

`python` · Advanced · `from djust.components import PresenceAvatars` · [Open it live](https://djust.org/components/presence_avatars/)

```text
PresenceAvatars(users=None, max_display=5, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `users` | List[Union[dict, object]] \| None | `None` | List of user dicts (name, avatar, status) or objects. status can be: "online", "away", "busy", "offline" (default: "online"). |
| `max_display` | int | `5` | Maximum avatars before "+N" overflow (default: 5). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Progress

Style-agnostic progress bar component using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/progress/)

```text
{% theme_progress value=... max=... label=... css_prefix=... attrs=... slot_label=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | int \| None | `None` | Current progress value |
| `max` | int | `100` | Maximum value (default: 100) |
| `label` | str | `` | Optional label text displayed above the bar |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |

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

```text
Progress(value=0, max=100, label=None, variant='default', size='md', show_value=False, custom_class='', **kwargs)
```

**Slots:** `slot_label`

**Accessibility:** Progress must have role=progressbar.

### Progress Circle

Style-agnostic circular progress indicator using SVG stroke-dasharray.

`python` · Advanced · `from djust.components import ProgressCircle` · [Open it live](https://djust.org/components/progress_circle/)

```text
ProgressCircle(value=0, size='md', color='primary', show_value=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | int | `0` | Progress percentage (0-100) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `color` | str | `'primary'` | Color variant (primary, success, warning, danger) |
| `show_value` | bool | `True` | Whether to display percentage text (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Prompt Editor

Template editing with {{variable}} highlighting.

`python` · Advanced · `from djust.components import PromptEditor` · [Open it live](https://djust.org/components/prompt_editor/)

```text
PromptEditor(template='', variables=None, event='save_prompt', placeholder='Enter your prompt template...', rows=6, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `template` | str | `''` | The template string with {{variable}} placeholders. |
| `variables` | Dict[str, str] \| None | `None` | Dict of variable name -> value for preview. |
| `event` | str | `'save_prompt'` | Event name for save action. |
| `placeholder` | str | `'Enter your prompt template...'` | Placeholder text for the editor. |
| `rows` | int | `6` | Number of rows for the textarea. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

## Q

### Qr Code

Pure SVG QR code generator.

`python` · Advanced · `from djust.components import QRCode` · [Open it live](https://djust.org/components/qr_code/)

```text
QRCode(data='', size='md', fg_color='#000', bg_color='#fff', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | str | `''` | The data to encode in the QR code. |
| `size` | str | `'md'` | Size preset (sm=128, md=200, lg=300) or int. |
| `fg_color` | str | `'#000'` | Foreground color (default: #000). |
| `bg_color` | str | `'#fff'` | Background color (default: #fff). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

## R

### Radio

`template` · Core UI · [Open it live](https://djust.org/components/radio/)

```text
{% theme_radio name=... label=... options=... selected=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | *required* | — |
| `label` | str \| None | `None` | — |
| `options` | list | `None` | — |
| `selected` | str | `` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_options` | str | `None` | — |

**Slots:** `slot_label`, `slot_options`

**Accessibility:** Radio group must have role=radiogroup.

### Rating

Star rating component.

`python` · Core UI · `from djust.components import Rating` · [Open it live](https://djust.org/components/rating/)

```text
Rating(value=0, max_stars=5, readonly=False, event='set_rating', size='md', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | float | `0` | current rating value (0-max_stars, supports half stars) |
| `max_stars` | int | `5` | maximum number of stars |
| `readonly` | bool | `False` | if True, stars are not clickable |
| `event` | str | `'set_rating'` | dj-click event name |
| `size` | str | `'md'` | sm, md, lg |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Reactions

Slack-style emoji reactions with live-updating counts.

`python` · Advanced · `from djust.components import Reactions` · [Open it live](https://djust.org/components/reactions/)

```text
Reactions(options=None, counts=None, event='react', active=None, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | List[str] \| None | `None` | List of emoji strings to display. |
| `counts` | Dict[str, int] \| None | `None` | Dict mapping emoji to count. |
| `event` | str | `'react'` | djust event to fire on click. |
| `active` | List[str] \| None | `None` | List of emojis the current user has selected. |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Relative Time

Displays a datetime as relative text ("3 hours ago") with optional

`python` · Advanced · `from djust.components import RelativeTime` · [Open it live](https://djust.org/components/relative_time/)

```text
RelativeTime(datetime=None, auto_update=True, interval=60, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `datetime` | Union[str, ForwardRef('datetime'), NoneType] | `None` | ISO-format datetime string or datetime object |
| `auto_update` | bool | `True` | Enable client-side interval updates (default True) |
| `interval` | int | `60` | Update interval in seconds (default 60) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Resizable Panel

Container with a drag-to-resize handle.

`python` · Layout · `from djust.components import ResizablePanel` · [Open it live](https://djust.org/components/resizable_panel/)

```text
ResizablePanel(content='', direction='horizontal', min_size='100px', max_size='none', initial_size='50%', disabled=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | HTML content inside the panel |
| `direction` | str | `'horizontal'` | "horizontal" or "vertical" (default "horizontal") |
| `min_size` | str | `'100px'` | minimum size CSS value (default "100px") |
| `max_size` | str | `'none'` | maximum size CSS value (default "none") |
| `initial_size` | str | `'50%'` | starting size CSS value (default "50%") |
| `disabled` | bool | `False` | disable resize (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Responsive Image

Picture element with srcset, lazy loading, and blur-up placeholder.

`python` · Media · `from djust.components import ResponsiveImage` · [Open it live](https://djust.org/components/responsive_image/)

```text
ResponsiveImage(src='', alt='', aspect_ratio='', lazy=True, srcset='', sizes='', placeholder='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | str | `''` | Image URL (required) |
| `alt` | str | `''` | Alt text (required for accessibility) |
| `aspect_ratio` | str | `''` | CSS aspect-ratio value (e.g. "16/9", "4/3", "1/1") |
| `lazy` | bool | `True` | Enable native lazy loading (default True) |
| `srcset` | str | `''` | Optional srcset attribute value |
| `sizes` | str | `''` | Optional sizes attribute value |
| `placeholder` | str | `''` | URL for blur-up placeholder image |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Ribbon

Corner ribbon overlay badge.

`python` · Layout · `from djust.components import Ribbon` · [Open it live](https://djust.org/components/ribbon/)

```text
Ribbon(text='', variant='primary', position='top-right', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | `''` | Ribbon label text. |
| `variant` | str | `'primary'` | Color variant (primary, success, warning, danger). |
| `position` | str | `'top-right'` | Corner position (top-left, top-right, bottom-left, bottom-right). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Rich Select

Select dropdown where each option can include icons, images, descriptions,

`python` · Forms · `from djust.components import RichSelect` · [Open it live](https://djust.org/components/rich_select/)

```text
RichSelect(name='', options=None, value='', event='', placeholder='Select...', disabled=False, searchable=False, label='', variant_map=None, **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `options` | List[Dict] \| None | `None` | list of dicts with keys: value, label, and optional icon, image, description, badge, variant |
| `value` | str | `''` | currently selected value |
| `event` | str | `''` | dj-click event name for selection |
| `placeholder` | str | `'Select...'` | text shown when nothing is selected |
| `disabled` | bool | `False` | disables the control; suppresses trigger variant tint |
| `searchable` | bool | `False` | adds search input to filter options |
| `label` | str | `''` | optional label text |
| `variant_map` | Dict[str, str] \| None | `None` | optional dict mapping option value → variant name; applied to any option that doesn't already declare its own `variant` key |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Rich Text Editor

Basic rich text editor component (contenteditable + toolbar).

`python` · Advanced · `from djust.components import RichTextEditor` · [Open it live](https://djust.org/components/rich_text_editor/)

```text
RichTextEditor(name='content', value='', event='update_content', placeholder='Start typing...', height='200px', label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'content'` | form field name |
| `value` | str | `''` | initial HTML content (pre-rendered, caller's responsibility) |
| `event` | str | `'update_content'` | dj-input event name |
| `placeholder` | str | `'Start typing...'` | editor placeholder |
| `height` | str | `'200px'` | CSS min-height |
| `label` | str | `''` | label text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `update_content`.

## S

### Scroll Area

Scrollable area container component.

`python` · Layout · `from djust.components import ScrollArea` · [Open it live](https://djust.org/components/scroll_area/)

```text
ScrollArea(content='', max_height='400px', label='Scrollable content', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | scrollable content (pre-rendered HTML) |
| `max_height` | str | `'400px'` | CSS max-height value |
| `label` | str | `'Scrollable content'` | accessible label |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Scroll Spy

Style-agnostic scroll spy component.

`python` · Navigation · `from djust.components import ScrollSpy` · [Open it live](https://djust.org/components/scroll_spy/)

```text
ScrollSpy(sections=None, active='', active_event='section_changed', offset='0px', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `sections` | list \| None | `None` | List of section IDs to observe |
| `active` | str | `''` | Currently active section ID |
| `active_event` | str | `'section_changed'` | djust event fired when active section changes |
| `offset` | str | `'0px'` | Offset from top for intersection (default: "0px") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `section_changed`. 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/scroll-spy.js' %}"></script>` to the page. djust ships it; without it the markup renders but does not update.

### Scroll To Top

Floating scroll-to-top button that appears after a scroll threshold.

`python` · Navigation · `from djust.components import ScrollToTop` · [Open it live](https://djust.org/components/scroll_to_top/)

```text
ScrollToTop(threshold='300px', label='Back to top', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `threshold` | str | `'300px'` | Scroll distance before button appears (default "300px") |
| `label` | str | `'Back to top'` | Accessible label (default "Back to top") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Segmented Progress

Style-agnostic segmented progress bar with labeled steps.

`python` · Core UI · `from djust.components import SegmentedProgress` · [Open it live](https://djust.org/components/segmented_progress/)

```text
SegmentedProgress(steps=None, current=0, size='md', event='set_segment', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | List[Union[str, Dict]] \| None | `None` | List of step labels (strings) or dicts with "label" key |
| `current` | int | `0` | Current step number (1-indexed) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `event` | str | `'set_segment'` | djust event dispatched when a step is clicked. Each step sends its 1-based number as `value`, so a host sets `current` to it. Pass an empty string to render the steps as static indicators instead. |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Select

`template` · Core UI · [Open it live](https://djust.org/components/select/)

```text
{% theme_select name=... label=... options=... placeholder=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | *required* | — |
| `label` | str \| None | `None` | — |
| `options` | list | `None` | — |
| `placeholder` | str | `` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_select` | str | `None` | — |
| `slot_help_text` | str | `None` | — |
| `slot_error` | str | `None` | — |

**Slots:** `slot_label`, `slot_select`, `slot_help_text`, `slot_error`

**Accessibility:** Label must reference select via for attribute.

### Server Event Toast

`python` · Feedback · [Open it live](https://djust.org/components/server_event_toast/)

```text
Server Event Toast()
```

### Sheet

Sheet/drawer overlay component.

`python` · Layout · `from djust.components import Sheet` · [Open it live](https://djust.org/components/sheet/)

```text
Sheet(content='', title='', side='right', is_open=False, close_event='close_sheet', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | sheet body (pre-rendered HTML) |
| `title` | str | `''` | optional header title |
| `side` | str | `'right'` | left, right |
| `is_open` | bool | `False` | whether sheet is open |
| `close_event` | str | `'close_sheet'` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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`.

### Sidebar

Sidebar navigation component.

`python` · Navigation · `from djust.components import Sidebar` · [Open it live](https://djust.org/components/sidebar/)

```text
Sidebar(items=None, title='', collapsed=False, content='', toggle_event='toggle_sidebar', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: label, href, icon, active (bool) |
| `title` | str | `''` | sidebar title |
| `collapsed` | bool | `False` | whether sidebar is collapsed |
| `content` | str | `''` | pre-rendered HTML content (alternative to items) |
| `toggle_event` | str | `'toggle_sidebar'` | — |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Sidebar Nav

`template` · Navigation · [Open it live](https://djust.org/components/sidebar_nav/)

```text
{% theme_sidebar_nav sections=... css_prefix=... attrs=... slot_header=... slot_sections=... slot_footer=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `sections` | list | `None` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_header` | str | `None` | — |
| `slot_sections` | str | `None` | — |
| `slot_footer` | str | `None` | — |

**Slots:** `slot_header`, `slot_sections`, `slot_footer`

**Accessibility:** Sidebar nav must have role=navigation; Sidebar nav must have aria-label=Sidebar.

### Signature Pad

Canvas-based signature capture pad.

`python` · Forms · `from djust.components import SignaturePad` · [Open it live](https://djust.org/components/signature_pad/)

```text
SignaturePad(name='signature', save_event='save_signature', width=400, height=200, pen_color='#000000', pen_width=2, disabled=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'signature'` | form field name for the hidden input |
| `save_event` | str | `'save_signature'` | djust event fired on save with base64 data |
| `width` | int | `400` | canvas width (default 400) |
| `height` | int | `200` | canvas height (default 200) |
| `pen_color` | str | `'#000000'` | stroke color (default "#000000") |
| `pen_width` | int | `2` | stroke width in px (default 2) |
| `disabled` | bool | `False` | disable drawing (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `save_signature`.

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

### Skeleton

Skeleton loading placeholder component.

`template` · Core UI · [Open it live](https://djust.org/components/skeleton/)

```text
{% theme_skeleton variant=... width=... height=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | str | `text` | — |
| `width` | str | `100%` | — |
| `height` | str | `1rem` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |

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

```text
Skeleton(skeleton_type='text', lines=3, custom_class='', **kwargs)
```

### Skeleton Factory

Style-agnostic skeleton loading state generator.

`python` · Advanced · `from djust.components import SkeletonFactory` · [Open it live](https://djust.org/components/skeleton_factory/)

```text
SkeletonFactory(component='text', columns=4, rows=5, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `component` | str | `'text'` | Target component type (data_table, card, list, text) |
| `columns` | int | `4` | Number of columns (for data_table, default: 4) |
| `rows` | int | `5` | Number of rows (for data_table/list/text, default: 5) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Sortable Grid

2D drag-and-drop grid layout.

`python` · Advanced · `from djust.components import SortableGrid` · [Open it live](https://djust.org/components/sortable_grid/)

```text
SortableGrid(items=None, columns=3, move_event='reorder', gap='0.75rem', disabled=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with `id`, `label`, optional `thumbnail` |
| `columns` | int | `3` | number of grid columns (default 3) |
| `move_event` | str | `'reorder'` | djust event fired on reorder |
| `gap` | str | `'0.75rem'` | CSS gap value (default "0.75rem") |
| `disabled` | bool | `False` | disable drag (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `reorder`. 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="SortableGrid"`. The markup renders, but the interaction is yours to add — register `window.djust.hooks.SortableGrid` (see [hooks](/guides/hooks/)).

### Sortable List

Drag-and-drop reorderable list.

`python` · Advanced · `from djust.components import SortableList` · [Open it live](https://djust.org/components/sortable_list/)

```text
SortableList(items=None, move_event='reorder', handle=True, disabled=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with `id` and `label` keys |
| `move_event` | str | `'reorder'` | djust event fired on reorder (receives `order` list) |
| `handle` | bool | `True` | show drag handle (default True) |
| `disabled` | bool | `False` | disable drag (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `reorder`. 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="SortableList"`. The markup renders, but the interaction is yours to add — register `window.djust.hooks.SortableList` (see [hooks](/guides/hooks/)).

### Source Citation

Inline footnote marker with hover popover showing source details.

`python` · Data Display · `from djust.components import SourceCitation` · [Open it live](https://djust.org/components/source_citation/)

```text
SourceCitation(index=1, title='', url='', relevance=None, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `index` | int | `1` | Citation number (displayed as superscript) |
| `title` | str | `''` | Source title |
| `url` | str | `''` | Source URL (optional) |
| `relevance` | float \| None | `None` | Relevance score 0-1 (optional) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Sparkline

Style-agnostic inline sparkline using SVG.

`python` · Charts · `from djust.components import Sparkline` · [Open it live](https://djust.org/components/sparkline/)

```text
Sparkline(data=None, variant='line', width=100, height=24, color='', stroke_width=1.5, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | list \| None | `None` | List of numeric values |
| `variant` | str | `'line'` | Chart type — "line" (default), "bar", "area" |
| `width` | int | `100` | SVG width (default: 100) |
| `height` | int | `24` | SVG height (default: 24) |
| `color` | str | `''` | Stroke/fill color |
| `stroke_width` | float | `1.5` | Line stroke width (default: 1.5) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Spinner

Style-agnostic spinner component using CSS custom properties.

`python` · Core UI · `from djust.components import Spinner` · [Open it live](https://djust.org/components/spinner/)

```text
Spinner(size='md', variant='default', label='Loading...', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `variant` | str | `'default'` | Color variant (default, primary, muted) |
| `label` | str \| None | `'Loading...'` | Screen-reader accessible label (default: "Loading...") |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Split Button

Split button with primary action and dropdown menu.

`python` · Advanced · `from djust.components import SplitButton` · [Open it live](https://djust.org/components/split_button/)

```text
SplitButton(label='', event='', options=None, variant='primary', size='md', is_open=False, toggle_event='toggle_split_menu', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | `''` | primary button text |
| `event` | str | `''` | dj-click event for primary action |
| `options` | list \| None | `None` | list of dicts with keys: label, event |
| `variant` | str | `'primary'` | primary, secondary, danger, success |
| `size` | str | `'md'` | sm, md, lg |
| `is_open` | bool | `False` | — |
| `toggle_event` | str | `'toggle_split_menu'` | — |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Split Pane

Split pane/resizable layout component.

`python` · Layout · `from djust.components import SplitPane` · [Open it live](https://djust.org/components/split_pane/)

```text
SplitPane(left='', right='', direction='horizontal', initial=50, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `left` | str | `''` | left/top pane content (pre-rendered HTML) |
| `right` | str | `''` | right/bottom pane content (pre-rendered HTML) |
| `direction` | str | `'horizontal'` | horizontal, vertical |
| `initial` | int | `50` | initial split percentage |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Stat Card

Style-agnostic stat card component using CSS custom properties.

`python` · Charts · `from djust.components import StatCard` · [Open it live](https://djust.org/components/stat_card/)

```text
StatCard(label, value, trend=None, trend_value=None, icon=None, variant='default', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | *required* | Metric label text |
| `value` | str | *required* | Metric value (string for flexible formatting) |
| `trend` | str \| None | `None` | Trend direction (up, down, flat, or None) |
| `trend_value` | str \| None | `None` | Trend change text (e.g., "+12%", "-3%") |
| `icon` | str \| None | `None` | Optional icon text (emoji or HTML) |
| `variant` | str | `'default'` | Style variant (default, bordered, elevated) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Status Dot

Style-agnostic animated status indicator dot using CSS custom properties.

`python` · Feedback · `from djust.components import StatusDot` · [Open it live](https://djust.org/components/status_dot/)

```text
StatusDot(status, variant=None, size='md', animate=NOT_SUPPLIED, tooltip=None, custom_class='', custom_status_map=None, custom_animation_map=None, **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | str | *required* | Status string (e.g., "running", "completed", "failed") |
| `variant` | str \| None | `None` | Color variant (success, info, warning, danger, muted) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `animate` | str \| None | `NOT_SUPPLIED` | Animation type (pulse, spin, fade, None) |
| `tooltip` | str \| None | `None` | Optional tooltip text (requires title attribute support) |
| `custom_class` | str | `''` | Additional CSS classes |
| `custom_status_map` | Dict[str, str] \| None | `None` | — |
| `custom_animation_map` | Dict[str, Optional[str]] \| None | `None` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Status Indicator

Style-agnostic status indicator with colored dot and optional label.

`python` · Feedback · `from djust.components import StatusIndicator` · [Open it live](https://djust.org/components/status_indicator/)

```text
StatusIndicator(status='offline', label=None, pulse=False, size='md', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | str | `'offline'` | Status string (online, degraded, offline, maintenance) |
| `label` | str \| None | `None` | Optional label text |
| `pulse` | bool | `False` | Whether to animate with pulse (default: False) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Stepper

Step indicator/wizard progress component.

`python` · Navigation · `from djust.components import Stepper` · [Open it live](https://djust.org/components/stepper/)

```text
Stepper(steps=None, active=0, event='set_step', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | list \| None | `None` | list of dicts with keys: label, complete (bool) |
| `active` | int | `0` | 0-based index of current step |
| `event` | str | `'set_step'` | dj-click event name for step navigation |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Sticky Header

Sticky header component.

`python` · Navigation · `from djust.components import StickyHeader` · [Open it live](https://djust.org/components/sticky_header/)

```text
StickyHeader(content='', offset='0', z_index='10', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | header content (pre-rendered HTML) |
| `offset` | str | `'0'` | CSS top offset |
| `z_index` | str | `'10'` | CSS z-index value |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Streaming Text

Renders text arriving incrementally via WebSocket with typing cursor.

`python` · Advanced · `from djust.components import StreamingText` · [Open it live](https://djust.org/components/streaming_text/)

```text
StreamingText(stream_event='stream_chunk', text='', markdown=False, auto_scroll=True, cursor=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `stream_event` | str | `'stream_chunk'` | WebSocket event name for incoming text chunks |
| `text` | str | `''` | Initial text content |
| `markdown` | bool | `False` | Whether to render text as markdown |
| `auto_scroll` | bool | `True` | Whether to auto-scroll to bottom on new content |
| `cursor` | bool | `True` | Whether to show a typing cursor animation |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Switch

Style-agnostic toggle switch component using CSS custom properties.

`python` · Core UI · `from djust.components import Switch` · [Open it live](https://djust.org/components/switch/)

```text
Switch(name='', checked=False, label=None, disabled=False, action=None, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | Form field name |
| `checked` | bool | `False` | Initial checked state |
| `label` | str \| None | `None` | Label text displayed next to the switch |
| `disabled` | bool | `False` | Whether the switch is disabled |
| `action` | str \| None | `None` | djust event handler name (for dj-change) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `toggle_switch`.

## T

### Table

`template` · Data Display · [Open it live](https://djust.org/components/table/)

```text
{% theme_table headers=... rows=... variant=... caption=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `headers` | list | *required* | — |
| `rows` | list | *required* | — |
| `variant` | str | `default` | — |
| `caption` | str \| None | `None` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_caption` | str | `None` | — |
| `slot_header` | str | `None` | — |
| `slot_body` | str | `None` | — |
| `slot_footer` | str | `None` | — |

**Slots:** `slot_caption`, `slot_header`, `slot_body`, `slot_footer`

### Table Of Contents

Table of contents navigation component.

`python` · Navigation · `from djust.components import TableOfContents` · [Open it live](https://djust.org/components/table_of_contents/)

```text
TableOfContents(items=None, title='Contents', active='', event='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: id, label, level |
| `title` | str | `'Contents'` | TOC heading |
| `active` | str | `''` | currently active section id |
| `event` | str | `''` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Tabs

Tab navigation component.

`template` · Core UI · [Open it live](https://djust.org/components/tabs/)

```text
{% theme_tabs id=... tabs=... active=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | str | *required* | — |
| `tabs` | list | *required* | list of dicts with keys: id, label |
| `active` | int | `0` | id of active tab |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |

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

```text
Tabs(tabs=None, active='', content='', event='set_tab', custom_class='', **kwargs)
```

**Events sent to your view:** `set_tab`.

**Accessibility:** Tab list must have role=tablist.

### Tag

Style-agnostic tag/chip component using CSS custom properties.

`python` · Core UI · `from djust.components import Tag` · [Open it live](https://djust.org/components/tag/)

```text
Tag(label, variant='default', size='md', dismissible=False, action=None, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | str | *required* | Tag text content |
| `variant` | str | `'default'` | Color variant (default, primary, success, info, warning, danger) |
| `size` | str | `'md'` | Size variant (sm, md, lg) |
| `dismissible` | bool | `False` | Whether the tag can be dismissed |
| `action` | str \| None | `None` | djust event handler name for dismiss (for dj-click) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Tag Input

Tag input component for adding/removing tags.

`python` · Forms · `from djust.components import TagInput` · [Open it live](https://djust.org/components/tag_input/)

```text
TagInput(name='', tags=None, event='', placeholder='Add tag...', label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | form field name |
| `tags` | list \| None | `None` | list of current tag strings |
| `event` | str | `''` | dj-click event name |
| `placeholder` | str | `'Add tag...'` | input placeholder |
| `label` | str | `''` | label text |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `add_tag`.

### Terminal

Monospace terminal emulator display with ANSI color support.

`python` · Data Display · `from djust.components import Terminal` · [Open it live](https://djust.org/components/terminal/)

```text
Terminal(output=None, title='', stream_event='', show_line_numbers=False, wrap=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `output` | list \| None | `None` | list of text lines to display |
| `title` | str | `''` | optional title bar text |
| `stream_event` | str | `''` | djust event for streaming new lines |
| `show_line_numbers` | bool | `False` | show line numbers (default False) |
| `wrap` | bool | `False` | wrap long lines (default False) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Textarea

`template` · Core UI · [Open it live](https://djust.org/components/textarea/)

```text
{% theme_textarea name=... label=... placeholder=... rows=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | *required* | — |
| `label` | str \| None | `None` | — |
| `placeholder` | str | `` | — |
| `rows` | int | `4` | — |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_label` | str | `None` | — |
| `slot_textarea` | str | `None` | — |
| `slot_help_text` | str | `None` | — |
| `slot_error` | str | `None` | — |

**Slots:** `slot_label`, `slot_textarea`, `slot_help_text`, `slot_error`

**Accessibility:** Label must reference textarea via for attribute.

### Theme Toggle

Light/dark/system theme toggle component.

`python` · Advanced · `from djust.components import ThemeToggle` · [Open it live](https://djust.org/components/theme_toggle/)

```text
ThemeToggle(current='system', event='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `current` | str | `'system'` | current theme (light, dark, system) |
| `event` | str | `''` | dj-click event name |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Thinking Indicator

Animated status indicator for AI processing states.

`python` · Advanced · `from djust.components import ThinkingIndicator` · [Open it live](https://djust.org/components/thinking_indicator/)

```text
ThinkingIndicator(status='thinking', label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | str | `'thinking'` | Animation type (thinking, searching, generating, tool_use, idle) |
| `label` | str | `''` | Descriptive text displayed alongside animation |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Time Picker

Style-agnostic time picker component using CSS custom properties.

`python` · Forms · `from djust.components import TimePicker` · [Open it live](https://djust.org/components/time_picker/)

```text
TimePicker(name='time', value='', event='', format_24h=False, min_time='', max_time='', step=1, disabled=False, label='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `'time'` | Form field name |
| `value` | str | `''` | Initial time value in HH:MM format |
| `event` | str | `''` | djust event handler name (for dj-change) |
| `format_24h` | bool | `False` | Use 24-hour format (default: False) |
| `min_time` | str | `''` | Minimum selectable time (HH:MM) |
| `max_time` | str | `''` | Maximum selectable time (HH:MM) |
| `step` | int | `1` | Minute step interval (default: 1) |
| `disabled` | bool | `False` | Whether the picker is disabled |
| `label` | str | `''` | Optional label text |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Timeline

Timeline component.

`python` · Data Display · `from djust.components import Timeline` · [Open it live](https://djust.org/components/timeline/)

```text
Timeline(items=None, content='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts with keys: title, time, content |
| `content` | str | `''` | pre-rendered HTML (alternative to items list) |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Toast

Style-agnostic toast notification component using CSS custom properties.

`template` · Core UI · [Open it live](https://djust.org/components/toast/)

```text
{% theme_toast message=... variant=... position=... duration=... css_prefix=... attrs=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | str | *required* | Toast text content |
| `variant` | str | `info` | — |
| `position` | str | `top-right` | — |
| `duration` | int | `5000` | Auto-dismiss duration in ms (0 = no auto-dismiss) |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_message` | str | `None` | — |
| `slot_actions` | str | `None` | — |

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

```text
Toast(message, type='info', duration=3000, dismissible=True, action=None, custom_class='', **kwargs)
```

**Slots:** `slot_message`, `slot_actions`

**Accessibility:** Toast must have role=status; Toast must have aria-live=polite.

### Toggle Group

Segmented toggle button group component.

`python` · Core UI · `from djust.components import ToggleGroup` · [Open it live](https://djust.org/components/toggle_group/)

```text
ToggleGroup(name='', options=None, value='', event='toggle_select', size='md', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | str | `''` | group name |
| `options` | list \| None | `None` | list of dicts with keys: value, label |
| `value` | str | `''` | currently selected value |
| `event` | str | `'toggle_select'` | dj-click event name |
| `size` | str | `'md'` | sm, md, lg |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `toggle_select`.

### Token Counter

Compact progress display showing token usage versus limit.

`python` · Advanced · `from djust.components import TokenCounter` · [Open it live](https://djust.org/components/token_counter/)

```text
TokenCounter(current=0, max=4096, label=None, show_label=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `current` | int | `0` | Current token count |
| `max` | int | `4096` | Maximum token limit |
| `label` | str \| None | `None` | Optional label (default: auto-generated "1,500 / 4,096") |
| `show_label` | bool | `True` | Whether to display the label (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Toolbar

Toolbar component with button groups.

`python` · Navigation · `from djust.components import Toolbar` · [Open it live](https://djust.org/components/toolbar/)

```text
Toolbar(content='', variant='default', align='left', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | str | `''` | toolbar buttons/controls (pre-rendered HTML) |
| `variant` | str | `'default'` | default, compact |
| `align` | str | `'left'` | left, center, right |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Tooltip

Tooltip component.

`template` · Core UI · [Open it live](https://djust.org/components/tooltip/)

```text
{% theme_tooltip text=... position=... css_prefix=... attrs=... slot_content=... %}
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | str | *required* | tooltip text |
| `position` | str | `top` | top, bottom, left, right |
| `css_prefix` | str | `` | — |
| `attrs` | dict | `None` | — |
| `slot_content` | str | `None` | — |

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

```text
Tooltip(text='', content='', position='top', custom_class='', **kwargs)
```

**Slots:** `slot_content`

### Tour

Product tour with spotlight highlights and step navigation.

`python` · Advanced · `from djust.components import Tour` · [Open it live](https://djust.org/components/tour/)

```text
Tour(steps=None, active=0, event='tour', show_progress=True, show_skip=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | list \| None | `None` | list of step dicts with target, title, content |
| `active` | int | `0` | index of current step (default 0) |
| `event` | str | `'tour'` | djust event prefix for navigation (fires event_next, event_prev, event_skip) |
| `show_progress` | bool | `True` | show step progress indicator (default True) |
| `show_skip` | bool | `True` | show skip button (default True) |
| `custom_class` | str | `''` | additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Tree View

Expandable tree view component.

`python` · Data Display · `from djust.components import TreeView` · [Open it live](https://djust.org/components/tree_view/)

```text
TreeView(nodes=None, expand_event='tree_expand', select_event='tree_select', selected='', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `nodes` | list \| None | `None` | list of dicts with keys: id, label, expanded (bool), children (list) |
| `expand_event` | str | `'tree_expand'` | dj-click event for expanding nodes |
| `select_event` | str | `'tree_select'` | dj-click event for selecting nodes |
| `selected` | str | `''` | currently selected node id |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

### Treemap

Style-agnostic SVG treemap using CSS custom properties.

`python` · Charts · `from djust.components import Treemap` · [Open it live](https://djust.org/components/treemap/)

```text
Treemap(data=None, value_key='size', label_key='name', title=None, width=400, height=250, colors=None, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | list \| None | `None` | List of dicts with label_key and value_key fields |
| `value_key` | str | `'size'` | Key for numeric value (default: "size") |
| `label_key` | str | `'name'` | Key for label text (default: "name") |
| `title` | str \| None | `None` | Optional chart title |
| `width` | int | `400` | SVG width (default: 400) |
| `height` | int | `250` | SVG height (default: 250) |
| `colors` | list \| None | `None` | List of fill colors (cycles) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

### Truncated List

Style-agnostic truncated list component.

`python` · Data Display · `from djust.components import TruncatedList` · [Open it live](https://djust.org/components/truncated_list/)

```text
TruncatedList(items=None, max=3, expanded=False, toggle_event='toggle_list', overflow_label='+{count} more', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | List \| None | `None` | List of items (strings or dicts with 'label' key) |
| `max` | int | `3` | Maximum items to show before overflow (default: 3) |
| `expanded` | bool | `False` | Whether list is currently expanded (default: False) |
| `toggle_event` | str | `'toggle_list'` | djust event to toggle expanded state |
| `overflow_label` | str | `'+{count} more'` | Custom overflow label; {count} is replaced with hidden count |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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

## V

### Virtual List

Paginated virtual list component.

`python` · Data Display · `from djust.components import VirtualList` · [Open it live](https://djust.org/components/virtual_list/)

```text
VirtualList(items=None, total=0, page=1, page_size=20, load_more_event='load_more', custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | list \| None | `None` | list of dicts or strings |
| `total` | int | `0` | total number of items |
| `page` | int | `1` | current page number |
| `page_size` | int | `20` | items per page |
| `load_more_event` | str | `'load_more'` | dj-click event for loading more |
| `custom_class` | str | `''` | — |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**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`.

### Voice Input

Mic button with recording animation for speech input.

`python` · Advanced · `from djust.components import VoiceInput` · [Open it live](https://djust.org/components/voice_input/)

```text
VoiceInput(event='transcribe', lang='en-US', continuous=False, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `event` | str | `'transcribe'` | Event name for transcription result. |
| `lang` | str | `'en-US'` | BCP 47 language tag (default: en-US). |
| `continuous` | bool | `False` | Whether to continue recording (default: False). |
| `custom_class` | str | `''` | Additional CSS classes. |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

**Events sent to your view:** `transcribe`. 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="VoiceInput"`. The markup renders, but the interaction is yours to add — register `window.djust.hooks.VoiceInput` (see [hooks](/guides/hooks/)).

## W

### Wizard

Style-agnostic multi-step form wizard using CSS custom properties.

`python` · Navigation · `from djust.components import Wizard` · [Open it live](https://djust.org/components/wizard/)

```text
Wizard(steps=None, active='', event='set_step', show_numbers=True, custom_class='', **kwargs)
```

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | list \| None | `None` | List of step dicts with id and label keys |
| `active` | str | `''` | ID of the currently active step |
| `event` | str | `'set_step'` | djust event for step navigation |
| `show_numbers` | bool | `True` | Show step numbers (default: True) |
| `custom_class` | str | `''` | Additional CSS classes |
| `**kwargs` | — | — | Passed to `Component`: `name=` identifies this instance in the events it sends, `id=` sets `component.id` (it is not written into the markup); any other keyword is kept as state. |

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