Components

All 40 primitives, each with a live example and the markup to copy.

Forms

  • Checkbox Accessible checkboxes with a custom mark and an indeterminate state.
  • Fieldset Groups related controls under one legend.
  • Input and textarea Text inputs and textareas, with validation colours.
  • Input OTP Segmented one-time-password entry with a blinking caret.
  • Label The form label, tied to its control.
  • Radio group Custom radio controls in a column or a row.
  • Select The native select, with the chevron drawn on a wrapper.
  • Slider Native range input with a 24px target area.
  • Switch Sliding on/off control for settings that apply immediately.
  • Toggle A checkbox rendered as a sliding switch.

Actions

  • Button The button element, in three weights and the status colours.
  • Button group Connected buttons that read as one control.
  • Clipboard Copy-to-clipboard affordance for a code block.
  • Keyboard key Inline keyboard shortcuts with a tactile border.
  • Toggle group Single or multi-select toggle bar.

Navigation

  • Breadcrumb Semantic wayfinding with a slash or chevron separator.
  • Command palette Grouped search results with shortcut hints.
  • Link Anchors, with optional hover effects.
  • Menubar A row of menus, each a native disclosure.
  • Navbar Sticky application bar with a scroll-driven shadow.
  • Pagination Page controls with an ellipsis for elided ranges.
  • Tabs Tab list with a pill or underline treatment.

Overlays

  • Alert dialog Interrupts to confirm something destructive.
  • Dropdown A menu built on the same native popover primitive.
  • Hover card Richer preview panel revealed on hover or focus-within.
  • Modal Native top-layer dialog with a backdrop.
  • Popover Native [popover] surface — no positioning library, no script.
  • Sheet Dialog that slides in from an edge.
  • Tooltip Short hint shown on hover or focus.

Feedback

  • Alert Inline banner for status that stays on the page.
  • Empty state The zero-data screen, with room for a recovery action.
  • Loader Spinner for waits of unknown length.
  • Progress Determinate progress with status colours.
  • Skeleton Placeholder blocks for content whose layout is already known.
  • Toast Transient notification with a title and description.

Data display

  • Avatar Portraits, initials fallbacks, presence and stacked groups.
  • Badge Compact status label.
  • Card Surface with a header, body and footer.
  • Item A list row: media, text, and a trailing value.
  • Separator Horizontal or vertical divider, optionally labelled.

Layout

  • Accordion Disclosure built on native details and summary.
  • Aspect ratio Ratio-locked container that never reflows as media loads.
  • Carousel Scroll-snap carousel in pure CSS.
  • Collapsible A single disclosure, built on native details.
  • Headings The typographic scale applied to h1–h6.
  • Scroll area Bounded scroller with a thin custom scrollbar.
  • Sidebar An application rail that goes off-canvas on a phone.
  • Utilities Layout, spacing and alignment helpers on the golden-ratio scale.

Content

  • Code Inline code and preformatted blocks, with status variants.
  • Divider Horizontal rules in several treatments.
  • Image Images are responsive by default.
  • List Ordered and unordered lists with marker variants.
  • Table Data tables, styled without a class.