Primitives
25 components.
Primitives
BlockquoteA quotation block with an accent border and optional citation. BoxA generic themeable container that maps layout and style attributes to design tokens. CenterCenters its slotted content horizontally and vertically using a CSS grid. CodeAn inline code chip for rendering short snippets, identifiers, and keyboard input within text. FlexA flexbox layout container for arranging child elements in a row or column. GridCSS grid container primitive for building themeable, responsive two-dimensional layouts. HeadingA semantic heading primitive that renders a real h1-h6 tag for a correct document outline while keeping visual size fully independent and themeable. ImageA lazy-loaded image primitive that wraps an img inside an aspect-ratio box with configurable fit and corner rounding. LinkA themeable anchor primitive that wraps a native link with color, variant, and external-link styling. SectionA semantic section wrapper that applies consistent vertical rhythm and an optional centered, readable max-width container. SpacerA layout primitive that adds fixed or flexible empty space between elements. StackA vertical flex column that spaces its children with a consistent gap. TextA typographic primitive for rendering body copy and inline text with consistent size, weight, color, and alignment tokens. Visually HiddenAccessibility utility that visually hides slotted content while keeping it available to screen readers using the standard sr-only clip pattern.
Layout
AffixPins slotted content to the viewport once its scroll position passes a threshold (sticky-on-scroll). App ShellA top-level page scaffold that wires app chrome together with named slots for header, sidebar, footer, and main content in a CSS grid layout. CarouselCarousel with horizontal scroll-snap, navigation arrows, and dot indicators. ContainerWrapper that observes its own width and reflects a breakpoint (xs/sm/md/lg) so content can adapt to container size rather than viewport size. DisclosureShow/hide region that animates height between 0 and auto using native interpolate-size, no grid hack or JS measuring. SSR-safe, reduced-motion aware. Floating Action ButtonFloating action button pinned to a corner of the viewport, round or extended into a pill. Image CompareBefore/after comparison slider that reveals two stacked images as the handle is dragged. KanbanA drag-and-drop board with columns and cards. MasonryPinterest-style layout that distributes items into columns using native CSS multi-column. Overflow ListResponsive horizontal container that shows as many slotted children as fit on one line and collapses the rest into a trailing overflow menu. ResizableTwo resizable panels separated by a draggable divider.