Components

A clickable button with appearance and size variants.

A styled text input with focus ring and disabled state.

A multi-line text input matching Input styling.

A form label with proper for/htmlFor accessibility wiring.

A container with header, title, description, content, and footer sub-components.

A compact label for status, counts, and metadata.

A visual divider with horizontal or vertical orientation.

A box that displays a callout message with optional title and description.

A user avatar with image and a text/initials fallback.

Accessible checkbox powered by Zag.js with focus ring and disabled state.

Toggle switch powered by Zag.js, accessible via keyboard.

Accessible custom select with keyboard navigation, powered by Zag.js.

Modal dialog with focus trap, Escape dismiss, click-outside dismiss, and portal.

Side-anchored dialog (top/right/bottom/left). Shares the dialog state machine and controller.

Floating hint anchored to a trigger. Opens on hover + focus, closes on leave + Escape.

Floating panel anchored to a trigger. Opens on click; click-outside and Escape dismiss.

Floating menu with keyboard navigation, type-ahead, and click/Escape dismiss.

Notification toaster + Toast. Sonner-style stacking, group pause-on-hover, swipe-to-dismiss, Turbo-Stream friendly.

Accessible tabs with keyboard arrow navigation, automatic and manual activation.

Accessible accordion with single/multiple open modes and keyboard navigation.

Pressable toggle button with on/off state.

Group of radio inputs with keyboard navigation.

Group of toggle buttons with single or multiple selection.

Value picker with single thumb, range mode, and vertical orientation.

Input with autocomplete dropdown. Static items only in v0.6.

Wrapper over Rails form_with with FormField, FormLabel, FormDescription, FormMessage.

Cmd+K command palette as Dialog + Combobox composition.

Composable, semantic table primitives (shadcn parity). Static, no JS.

Loading placeholder — a pulsing muted box you size with utility classes.

Composable breadcrumb trail (nav/list/item/link/page/separator/ellipsis). Static, no JS.

Composable, link-based pagination (server-driven). Static, no JS.

Value-driven progress bar with progressbar a11y semantics. Static, no JS.

Modal confirmation dialog — role=alertdialog, no click-outside dismiss, initial focus on Cancel.

Server-driven data table — sortable column headers + row selection. Composes Table + Pagination.

Numeric stepper input with − / + controls, formatting, and no native spinners.

Composable, collapsible sidebar — icon rail on desktop, off-canvas on mobile, with menu primitives.

Localized date field (input + popover calendar) and a standalone inline calendar. Single + range selection, Rails-friendly hidden inputs.

One-time-code / PIN input — N single-character slots that submit one concatenated value.

Drag-and-drop file upload with a dropzone, browse button, file list with remove, and image previews. Submits via a real multipart file input.

Right-click context menu — full menu parity (items, checkbox/radio, submenus) opening at the cursor.

Star rating input with keyboard navigation, half-star support, and read-only mode.

Rich preview card shown on hover or focus of a trigger, rendered through a portal.

Multi-value text entry that collects free-form tags, with edit-in-place and array form submission.

Toggle the visibility of a content region with a smooth height animation.

Resizable side-by-side panels with draggable gutters; horizontal or vertical.

Slideshow with snap scrolling, prev/next controls, indicators, and optional autoplay.

Top-level site navigation with hover/focus dropdown panels per item.

Popover color picker with a saturation/lightness area, hue and alpha sliders, a hex input, and preset swatches.

Data-driven tree view with expand/collapse, single or multiple selection, keyboard navigation, optional checkboxes, and folder/file icons.