Components

Multi-variant action trigger with built-in loading and disabled states. Six variants × three sizes, AA contrast, 44 px touch target.

Flexible content container with optional header, body, footer. Five visual variants, status accents, interactive and selectable patterns.

Small contextual labels for status, tags, or counters. Eight variants including dot and outline.

Removable filter chips for selections, categories, and active filters.

Variants beyond plain anchor: subtle, plain, destructive, with icon affordances.

Page-level callout for system-wide messages: maintenance, success, errors. Five status variants.

Trail of links showing the user's location in a hierarchical structure.

Page navigation for lists. Supports numbered, simple, and truncated variants.

Horizontal or vertical dividers, with optional center label.

Profile images, initials, and status indicators. Six sizes, square or round.

Loading indicator. Five sizes (xs to xl) plus a light variant for dark surfaces.

Placeholder shapes for loading content. Pulses subtly to signal "data on the way".

Keyboard shortcut keys. Renders <kbd> with mono type and a subtle bottom border.

Determinate or indeterminate progress bar. Accent or status colors.

Convention for SVG icons. 16 / 20 / 24 px sizing, currentColor stroke, semantic alt text.

Collapsible panels with single or multi-open mode. Built on <details> for free a11y.

Confirmation dialog for destructive actions. Forces an explicit choice — no click-outside dismiss.

Hover/focus hint. Hover delay, focus trigger for keyboard, mobile-friendly tap.

Floating panel anchored to a trigger. Native Popover API where supported, polyfilled where not.

Rich-content tooltip — image + text + actions. For previews of links or profiles.

Edge-anchored panel — bottom on mobile, side on desktop. For supplementary navigation or filters.

Single show/hide region. The simplest form of progressive disclosure.

Grouped action buttons with arrow-key navigation. For editors, canvases, table headers.

File-drop area with drag-over state, click-to-browse fallback, multiple-file support.

Range input with single or dual handle. Keyboard-accessible, with tick marks and value labels.

Segmented control for single or multi-select among 2–5 options. View pickers, alignment buttons.

Scrollable region with branded thin scrollbars on platforms that support custom styling.

Right-click menu. Same engine as Menu but anchored to pointer.

Numeric stepper with min/max, step, decimals, and clamping behavior.

One-time-code input. Auto-advances on digit, paste-friendly, supports mask.

Color selection with HSL/RGB/Hex switching, palette, and recent swatches.

Monthly calendar grid. Keyboard navigation, locale-aware, range select option.

Input + calendar popover. Min/max constraints, disabled dates, format-aware.

Two-handle date range. Presets (last 7 days, this month). Constrained ranges.

Scroll-snap gallery with prev/next buttons and dot indicators. Touch- and keyboard-friendly.

Top navigation bar with brand, primary links, search, and account menu.

Left navigation column for app shells. Collapsible sections, active-route indicator.

Searchable command launcher (⌘K). Fuzzy search, keyboard-first, grouping by category.

"Nothing here yet" panel with illustration, headline, body copy, and a clear next action.

Sortable, filterable, paginated table. Sticky header, row selection, dense / comfortable density.

Conventions for inline error messages, summary banners, and submit-button state.

Horizontal menu bar with sub-menus. For desktop-style apps with File / Edit / View.

Conversation thread, message bubble, streaming indicator, suggestion chip — the AI-app starter kit.