Skip to content
wdj
Account

Registry

Actual Django contracts and 65 catalog entries, version 0.1.0a1.

Open JSON registry
Button

Action · done · 18 examples · 28 API fields

Link

Action · done · 5 examples · 8 API fields

Input

Input · done · 20 examples · 27 API fields

InputArea

Input · done · 10 examples · 18 API fields

Checkbox

Input · done · 18 examples · 15 API fields

Radio

Input · done · 21 examples · 17 API fields

Switch

Input · done · 16 examples · 15 API fields

Select

Input · partial · 33 examples · 32 API fields

Field

Input · done · 5 examples · 7 API fields

Label

Form · done · 8 examples · 11 API fields

Badge

Display · done · 12 examples · 7 API fields

Banner

Feedback · done · 18 examples · 12 API fields

Surface

Layout · done · 3 examples · 6 API fields

Separator

Layout · done · 3 examples · 3 API fields

Loader

Feedback · done · 4 examples · 4 API fields

Skeleton

Feedback · done · 5 examples · 4 API fields

Empty

Display · done · 6 examples · 11 API fields

Text

Display · done · 5 examples · 9 API fields

ButtonGroup

Action · done · 5 examples · 5 API fields

Collapsible

Display · done · 10 examples · 8 API fields

Meter

Display · done · 6 examples · 9 API fields

InputGroup

Input · done · 14 examples · 21 API fields

LayerCard

Layout · done · 7 examples · 9 API fields

Grid

Layout · done · 8 examples · 6 API fields

Sidebar

Navigation · done · 21 examples · 35 API fields

Page header

Blocks · done · 12 examples · 14 API fields

Breadcrumbs

Navigation · done · 7 examples · 6 API fields

Tabs

Navigation · done · 16 examples · 10 API fields

Pagination

Navigation · done · 12 examples · 17 API fields

Toolbar

Action · done · 13 examples · 11 API fields

Dialog

Overlay · done · 13 examples · 14 API fields

Drawer

Overlay · partial · 15 examples · 14 API fields

Tooltip

Overlay · done · 9 examples · 8 API fields

Popover

Overlay · done · 10 examples · 14 API fields

Toasty

Feedback · done · 12 examples · 7 API fields

Table

Data · done · 16 examples · 21 API fields

DatePicker

Input · partial · 18 examples · 40 API fields

TagInput

Input · done · 5 examples · 14 API fields

Slider

Input · done · 10 examples · 22 API fields

Chart

Data Visualization · done · 30 examples · 8 API fields

Chart legend

Data Visualization · done · 3 examples · 6 API fields

Custom charts

Data Visualization · done · 2 examples · 8 API fields

StatsGrid

Blocks · done · 3 examples · 3 API fields

FilterBar

Blocks · done · 3 examples · 5 API fields

DetailList

Blocks · done · 3 examples · 5 API fields

ActionCard

Blocks · done · 3 examples · 6 API fields

MenuBar

Navigation · done · 3 examples · 3 API fields

SankeyChart

Data Visualization · done · 14 examples · 8 API fields

Sparkline

Data Visualization · done · 3 examples · 8 API fields

Flow

Layout · done · 13 examples · 10 API fields

LayerDialog

Overlay · done · 14 examples · 14 API fields

Getting started

Overview
Install
Components and blocks
Interaction guide

Design

Design skill
Colors
Control dimensions
Accessibility
Design resources

Components

Components overview
AutocompleteFree-form input with local or HTMX-filtered suggestions.
BadgeSolid, tinted, outline and dot status labels.
BannerInline message bar with variants and optional action.
BreadcrumbsTrail navigation in two sizes.
ButtonVariants, sizes, shapes, icons and loading state.
ButtonGroupJoins a small set of tightly-coupled buttons into a single control (split buttons).
CheckboxSingle checkbox and indeterminate state.
ClipboardTextRead-only text field with a one-click copy-to-clipboard button.
Code / CodeHighlightedEscaped Pygments grammar highlighting, multiline tokens, line numbers, highlighted lines and localized copying.
CollapsibleComposable disclosure component for showing and hiding content.
Combobox / AutocompleteKumo-styled input/button triggers, search inside the popup, grouped local choices and debounced HTMX search.
CommandPaletteAccessible spotlight search overlay with Cmd+K keyboard shortcut.
DatePickerKumo-styled date and datetime popups; inline single, multiple and range calendars with bounds/presets.
DateRangePickerStyled popup or inline range calendar with bounds, presets and separately named form values.
DialogNative <dialog> modal with focus management.
DrawerEdge-anchored modal panel. LayerDialog has its own layered component.
DropdownMenuNative details menu with delegated keyboard navigation and dismissal.
EmptyEmpty-state placeholder with icon and action.
FieldLabel + description + error wrapper. Built into each control.
FlowDirected diagrams with branches, SVG connectors, custom anchors and responsive local scrolling.
GridResponsive CSS grid layout container with preset column configurations.
InlineCopyTextCompact borderless copy control for IDs and short values.
InputText field with label, description, leading/trailing icons.
InputAreaMulti-line textarea with auto-resize option.
InputGroupInput field with seamless prefix, suffix, and addon attachments.
LabelForm field label, optional marker and tooltip.
LayerCardCompound surface card with distinct primary and secondary layers.
LayerDialogLayered native modal with actions, forms, nested dialogs and pending states.
LinkInline, current and plain text links.
LoaderAnimated spinner in three sizes.
MenuBarCompact view selector using native radio semantics.
MeterProgress bar showing a measured value within a known range.
PaginationA page navigation component for navigating through paginated content.
PopoverAnchored popup with interactive content.
RadioRadio group, vertical and horizontal.
SelectKumo-styled Alpine dropdown with groups, rich options and multiple selection; native form values and fallback.
SensitiveInputPassword/secret input with reveal toggle and copy button.
SeparatorHorizontal / vertical rules with optional label.
SidebarRecursive navigation groups, account/zone views, search, loading, resize and full-screen mobile breadcrumbs.
SkeletonShimmer placeholder.
SliderInset single/range selection with vertical grips, value badges, endpoint labels and native keyboard/form behavior.
SurfaceBordered surface panel with header slot.
SwitchOn/off toggle in three sizes.
TableServer-driven table: sort, filter, select and paginate the full dataset.
Table of contentsPage section navigation tree with active link indicator.
TabsSegmented and underline tabs with a sliding indicator, responsive overflow and local Alpine or URL/HTMX state.
TagInputMulti-value badge input for tags and recipients.
TextHeading, body, secondary, success, error and mono text.
ToastyExpandable notification stack with variants, paused expiry and a live region.
ToolbarCompact grouped controls with shared borders, composed filters and keyboard arrow navigation.
TooltipHover and focus tooltip with grouped delays, Escape dismissal and viewport bounds.

Charts

Charts overview
Chart colors
TimeseriesServer-built Apache ECharts (line, area, bar, donut) themed to wdj tokens.
Chart legendLarge and compact legend items with loading states and real ECharts series toggles.
Custom chartsCustom ECharts options and trusted HTML tooltip templates.
MapsOffline SVG bubble/country maps and a draggable globe; projection and tooltips differ from Kumo.
SankeyServer-built flow charts with weighted links and themed labels.
SparklineCompact line and bar charts for inline metrics.

Blocks

Blocks overview
ActionCardGuidance card with caller-owned navigation or local actions.
DeleteResourceType-to-confirm dialog with error and pending states; POST integration for real resources.
DetailListResource metadata with semantic definition lists and optional links.
FilterBarComposable GET search form for server-owned filters and actions.
Page headerBreadcrumbs, title, description, local or URL tabs and action slots.
ResourceListPageResource list with usage guidance, additional content and pagination.
SettingsSectionResponsive settings section with form content and optional footer.
StatsGridResponsive metric cards with labels, values and semantic trends.

Integration

Advanced integration
Server fragments
Resource dashboard

Development

Registry
Build commands
Contributing
Changelog
↑ ↓ Navigate ↵ Select