Components
Every component is compiled by StyleX at build time and themed through the same variables as the blocks.
Form
Trigger actions with solid, surface, outline, ghost, and glass variants across six sizes — polymorphic via asChild (Ark) or render (Base UI).
Binary selection controls with outline, solid, and subtle boxes and a paired label.
Selectable cards with label, description, and checkmark indicator in surface, subtle, outline, and solid variants.
The standalone checkbox indicator square used by checkbox-style components.
Swatch trigger and checkerboard swatch grid with a selection indicator, from 2xs to 2xl.
Filterable input with a suggestion popup, item indicators, and an empty state slot.
Keyboard shortcut groups that space and mute a row of key hints.
Date input with calendar trigger, month navigation, and a selectable day grid.
Inline text that swaps between a hover preview and a focused input on click.
Label, control, helper text, and error slots with vertical and horizontal orientations.
Group related fields under a legend with helper text and spacing tuned per size.
Dashed dropzone with a file item list showing names, sizes, and delete triggers.
Text fields with outline, subtle, and flushed variants that inherit your palette and radius.
Prefix and suffix segments that share height and variant styling with an adjacent input.
An always-visible option list with selection indicators in subtle and solid panels.
A styled platform <select> with a positioned chevron indicator across five sizes.
Numeric fields with increment and decrement steppers in outline, subtle, and flushed variants.
One-time code entry with per-digit boxes in outline, subtle, and flushed variants.
Single-choice cards with label, description, and radio indicator in surface, subtle, outline, and solid variants.
Single-choice option lists with outline, subtle, and solid radio controls.
The standalone circular radio indicator with a scaled center dot.
Star rating input with keyboard-accessible items across four sizes.
A segmented control for mutually exclusive views with an inset track and raised active segment.
Custom listbox-style select with trigger, indicator, and item slots in outline and subtle styles.
Range selection with track, filled range, and thumb in outline and solid variants.
On/off toggles with a sliding thumb in solid and raised track variants.
Enter-to-add token input with removable item previews in outline, subtle, and flushed styles.
Multi-line text entry with the same outline, subtle, and flushed variants as Input.
Display
Vertically stacked disclosure panels with outline, subtle, and enclosed variants.
A floating bulk-action toolbar that appears above the page when items are selected.
User portraits with image and initials fallback, rounded or circular, from 2xs to 2xl.
Label state and metadata with palette-aware solid, subtle, surface, and outline styles.
Hierarchical navigation trails with plain and underline link styles in three sizes.
Framed conversational surfaces using the same solid, subtle, surface, outline, ghost, and plain variants as Button and Badge, plus start/end alignment, grouping, and edge-anchored reactions.
Sliding panels with previous and next controls and clickable indicator dots.
Framed code panels with a title header, controls, and scrollable monospace content.
Show and hide a region of content behind a trigger, with a bare content slot to style freely.
Color chips with an alpha checkerboard, sized from 2xs to 2xl.
Label and value pairs for metadata panels, with subtle and bold label emphasis.
Zero-data placeholders with an accent indicator, title, description, and actions.
Interactive row lists with a sticky header, hover states, and rounded rows.
Rich preview panels revealed from a trigger, in four padding sizes.
A sizing wrapper for inline SVG icons that inherits the current text color.
Squared icon containers in outline, solid, and subtle variants for feature lists and empty states.
Keyboard shortcut hints with raised, outline, subtle, and plain treatments.
Ordered and unordered lists with native markers or custom icon indicators.
An infinitely scrolling strip with faded edges that pauses for reduced motion.
Dropdown command lists with items, group labels, keyboard shortcut hints, and separators.
Conversation rows with an avatar slot, header, footer, grouping, and start/end alignment around a Bubble surface.
Avatar with name, secondary label, and a presence badge or ring, from 2xs to 2xl.
Anchored panels with header, body, and footer slots in four padding sizes.
Scannable code frames with a centered logo overlay, sized from 2xs to 2xl.
Sidebar navigation buttons with icon, label, and accent-tinted active state.
An accessibility link that stays visually hidden until keyboard focus reveals it.
Key figures with label, value, and help text in three value sizes.
Multi-step progress with numbered indicators, completion checks, and connecting separators.
Tabular data with line, inset, and outline treatments across three densities.
Switch between panels with line, enclosed, outline, pills, and ghost tab lists.
Compact labels for filtering and metadata with subtle, solid, outline, and surface variants.
Chronological events with indicators, connectors, and per-item content slots.
Nested hierarchies with expandable branches, indent guides, and depth-aware padding.
Feedback
Status banners for info, success, warning, and error with title, description, and indicator slots.
Modal windows with backdrop, positioner, and content slots in six widths.
Busy states that fill a container, cover it, or take over the screen while content loads.
Determinate progress bars with outline and subtle tracks in five sizes.
Circular determinate progress with a track, range, and centered value text.
A GPU-accelerated highlight sweep over inline text for streaming and busy labels.
Loading placeholders with pulse and shine animations that respect reduced motion.
A current-color loading indicator sized from inherit up to xl.
A palette-driven presence dot with a label, for system and user state.
Transient notifications with indicator, title, description, action, and close slots.
Short contextual labels with a default panel style and an inverted variant.
Typography
Quotations with subtle and solid accents and an attribution caption.
Inline code marks with palette-aware solid, subtle, surface, and outline styles.
Display and section headings across eleven sizes with tuned line heights and tracking.
Inline anchors with underline and plain hover treatments and a themed focus ring.
Inline text highlights with subtle, solid, and text-decoration treatments.
Layout
The top-level application frame composing a navbar, sidebar, and main content area.
Contextual side panels with a titled header and scrollable body in two densities.
Content containers with elevated, outline, subtle, and solid variants — Root resolves variant and size once and every part inherits them through context.
Slide-in panels anchored to any viewport edge, with header, body, and footer slots.
Draggable utility windows with a drag handle, title bar, and scrollable body.
A chat transcript scroller that anchors turns, follows streamed replies at the live edge, preserves place when history loads, and jumps to any message.
Top navigation bars in neutral, solid, and glass variants with brand and link slots.
Page scaffolds with header, title, description, and body in panel and settings variants.
Custom scroll containers with a palette-tinted scrollbar in four thicknesses.
Titled content sections with description and body slots for settings pages.
Horizontal and vertical rules in solid, dashed, and dotted weights.
App navigation rails with header, grouped nav items, and a scrollable body.
Master–detail layouts pairing a list pane with a detail content pane.
Resizable panel dividers with a separator line and a raised drag handle.