47 typed primitives
Component catalog
Browse the components by what they help you build. Each page has a live preview, install command, API details, accessibility notes, and the source behind the example.
Layout & structure
Build page shells, sections, and content groupings.
Card
Compose linked, static, or button-backed editorial cards from image, body, footer, tag, and action slots.
MediaFrame
Reserve stable media surfaces for images, video, placeholders, captions, and metadata.
SectionHead
Create section intros with eyebrow, title, subtitle, and size-based heading rhythm.
Container
Constrain page content with responsive max widths, horizontal padding tokens, and semantic element overrides.
ActionRail
Group compact actions vertically or horizontally for toolbars, side rails, and social links.
Separator
Divide related content horizontally or vertically with decorative or semantic separator behavior.
Navigation
Help readers move around a site or within a long page.
Navbar
Build responsive headers with brand, nav links, actions, sticky or glass styles, and a progress slot.
Footer
Build responsive site footers with brand copy, link columns, subscribe actions, and meta rows.
BackLink
Render a compact return link with a leading line, muted default state, and accent hover treatment.
Rail
Render vertical navigation lists for sidebars, filters, and secondary sections.
Toc
Render document outline links with active-section tracking and optional collapsible mode.
CommandSearch
Build a modal command palette with grouped results, filtering, keyboard navigation, and optional shortcut.
Overlays & menus
Layer contextual information and actions with managed focus and keyboard behavior.
Dialog
Open a modal surface with focus containment, Escape handling, background inertness, and focus restoration.
Popover
Anchor contextual content to a trigger with collision-aware positioning and outside-interaction handling.
Tooltip
Add short supporting context to focusable controls without replacing their accessible names.
DropdownMenu
Group secondary actions in a portal-mounted menu with roving focus, typeahead, and nested composition.
Forms & inputs
Collect values and give people clear, keyboard-friendly controls.
Button
Render primary actions, secondary actions, icon buttons, loading states, and asChild links.
Field
Group a label, form control, supporting text, and validation message without hiding native semantics.
Label
Associate visible text with a form control and preserve native click-to-focus behavior.
Input
Render text fields with prefix and suffix slots, validation state, and consistent control sizing.
Textarea
Collect multi-line text with consistent sizing, validation styling, and controlled resize behavior.
Checkbox
Represent independent checked, unchecked, and indeterminate choices with native keyboard behavior.
RadioGroup
Choose one option from a visible set with arrow-key navigation and optional supporting descriptions.
Select
Render single-choice dropdowns for sorting, filtering, and view controls with mobile sheet behavior.
Toggle
Render controlled or uncontrolled switches with role=switch semantics and token-backed motion.
SegmentedControl
Render single-select controls with roving keyboard focus and default or pill variants.
ThemeSwitcher
Render controlled light and dark theme controls in mini or full mode.
Tag
Render filter buttons for categories, stacks, and metadata.
Display
Present identity, status, metadata, and small pieces of data.
Badge
Label counts, statuses, and categories with compact size and variant controls.
Avatar
Render identity images or initials with fixed size tokens, fallback color, and slotted image support.
Status
Show compact state labels with a stable dot, tone, and optional pulse animation.
DataList
Render structured rows for stats, timelines, metadata, and compact content.
Eyebrow
Render compact section labels with mono text, uppercase rhythm, and predictable sizes.
Metric
Show key numbers with labels, descriptions, and optional trend state.
MetaRow
Render small inline metadata groups with mono text and separators.
ChangelogTimeline
Turn git-cliff JSON into a categorized release timeline with stable dates and GitHub links.
Content
Structure articles, documentation, quotes, and supporting links.
PullQuote
Highlight long-form quotes with optional attribution and an accent border.
Callout
Mark notes, tips, and warnings with clear labels and token-backed accents.
CodeBlock
Show preformatted code with an optional filename, language metadata, and copy action.
LinkList
Render compact resource and reading-list rows with dates, descriptions, and external-link handling.
ResourcesPanel
List project resources such as live links, source, docs, files, and videos in a compact sidebar.
Testimonial
Render quotes with author metadata, avatar fallback, size, and surface variants.
TestimonialGrid
Arrange testimonial cards in aligned grid or masonry layouts without JavaScript measurement.
EditorialLine
Render publication rows with index, date, title, summary, tag, and action metadata.
Feedback
Show loading, progress, and the result of an action.