DK Components

Status

Compact status label tuned for tone distinction, compressed layout, and readable emphasis shifts.

Status

Inline system message with tone-aware surfaces, optional actions, and dismiss handling for in-flow messaging.

Display

Structured content surface with predictable spacing rhythm, surface recipes, and low-drama display styling.

Display

Image or initial fallback surface with size, shape, and ring visibility recipes.

Display

Pure-SVG chart surface for line, bar, and area series with optional legend and lightweight point tooltips.

Collection

Data-driven disclosure list with contained open-panel layouts and reliable target sizing.

Navigation

Fixed-chevron path navigation with current-item emphasis and wrap-aware spacing.

Navigation

Two-level application shell navigation with active-state emphasis, branch expansion, and a collapsed mode.

Navigation

Ordered progress and workflow navigation surface with current, complete, upcoming, and error step semantics.

Action

Primary action control with compiled variants, size recipes, loading behavior, and proof-backed interaction states.

Choice

Compact filter-like token with selectable state and optional dismiss action.

Field

Display-first field that expands into focused editing for quick metadata changes without leaving the current layout.

Field

Filterable field-and-list control for faster option discovery when scanning a full menu is too heavy.

Overlay

Centered search-and-action surface for fast command execution, grouped results, and optional mod+k invocation.

Field

Single-date field and calendar surface with blocked dates, honest keyboard travel, and date-only values.

Field

Two-month date-range field with start/end selection, blocked-date handling, and popover calendar containment.

Display

Structured blank-slate surface for onboarding, first-use, and no-result moments.

Field

Single-line field shell with DK field tokens, helper/error support, and leading/trailing slots.

Field

Multiline field built on the same DK field contract as TextField, with containment checks for longer content.

Choice

Binary or indeterminate choice control with native-input semantics and proof-backed sizing.

Choice

Track/thumb toggle for clear on/off states with motion-gated proofs and touch-target guarantees.

Choice

Data-driven single-selection group with native radio semantics and predictable grouped layout.

Choice

Single-selection segmented control for tight mode switching and compact option clusters.

Navigation

Keyboard-navigable view switching with compiled triggers and tokenized panels.

Collection

Single-select hierarchical collection with branch expansion, depth cues, and keyboard traversal.

Overlay

Modal overlay surface with focus containment, backdrop dismissal, and tokenized sizing.

Overlay

Edge-anchored dialog surface for contextual tasks, side sheets, and longer-form secondary workflows.

Overlay

Anchored floating surface with deterministic placement and dismissal for contextual supporting content.

Collection

Data-driven action list with highlight, selection, and overlay containment.

Navigation

Windowed page navigation with current-state emphasis, ellipsis logic, and 44px targets.

Field

Styled upload field shell with file-list feedback and proof-backed trigger sizing.

Status

Linear progress meter with tone-aware fill, readable labels, and restrained motion.

Collection

Field-shell trigger and single-select listbox built on DK overlays and list navigation.

Display

Loading placeholder blocks for text, cards, and avatar spaces with tokenized shimmer and restrained motion.

Collection

Product-grade data table with sorting, selection, sticky headers, and overflow-first responsiveness.

Collection

Grid-semantics data surface with cell focus, pinned leading columns, and shared sorting/selection behavior with Table.

Overlay

Non-interactive floating hint surface with anchored containment and restrained motion.

Status

Data-driven feedback stack for transient notifications with placement, action, and dismissal behavior.