Explore, test, and interact with all 56 components and primitives with modern styling and tokens. Features full prop controls, portable story execution, and automated assertion tests.
Displays an interactive button with proportional size-to-radius geometry, smart variant/intent color resolution, leading/trailing slots, full-width alignment, and async loading state.
Proportional single-line text and file field supporting default, outline, and ghost variants, 4 size tiers aligned with Button, bi-directional password toggling, and customizable file input labels.
Auto-expanding multiline text field with default, outline, and ghost variants, 4 size tiers, maxHeight auto-scroll, zero scroll-dimension padding, and dynamic fader effects on scrollable edges.
A control that allows the user to toggle between checked and not checked states.
Accessible range and single-value slider with synchronized thumb and indicator line movement and optional real-time thumb tooltip.
Accessible tri-state checkbox with 250ms legible stroke-draw checkmark animation, indeterminate state, and CheckboxGroup parent-child synchronization.
Coordinates shared state across multiple checkboxes with automatic parent indeterminate state when some child checkboxes are off.
A set of checkable buttons—known as radio buttons—where only one can be checked at a time. Supports both standard animated circular radios and arbitrary custom content items.
Accessible select menu built on @base-ui/react/select with default, outline, and ghost variants, 4 proportional size tiers matching Button and Input, alignWithItem positioning, dual up/down chevron trigger icon, and OKLCH color-mix translucent popup overlay.
Form control wrapper orchestrating label, optional subtitle description, interactive input, and bottom caption with multi-intent feedback and optical vertical symmetry.
Groups related buttons into a contiguous segmented bar or a spaced toolbar with shared variant, intent, size, and bi-directional (LTR/RTL) corner geometry.
A two-state button that can be either on or off, supporting default, outline, and tint variants, size-to-radius scaling identical to Button, and square icon-* dimensions.
A set of two-state buttons coordinating selection state, attached or spaced layout, variant and size inheritance, and horizontal/vertical orientation.
Compound input container attaching icons, text addons, buttons, or dropdowns to inputs and textareas with synchronized focus rings, matching Input variants, sizes, and unified surface contrast.
Accessible, segmented one-time password and verification code input supporting default, outline, and ghost variants, 5 density tiers aligned with Button and Input, dynamic radius presets, and seamless copy-paste.
Fast, composable, unstyled command menu and spotlight search palette built with cmdk and Base UI Dialog.
Autocomplete input and picker combo built with Base UI Combobox primitives, seamlessly integrated with InputGroup surface architecture, context cascading, and multi-select chips.
A borderless modal window overlaid on the primary viewport with shadcn animations, size-driven density and paddings, and header-docked DialogClose.
A borderless interruptive confirmation modal with start-aligned header layout, shadcn animations, and Dialog-matching padding density.
A side-sliding docked panel on any viewport edge with exact shadcn transitions, unified under Drawer.
A touch-friendly sliding drawer with authentic gesture physics, drag-to-dismiss handle, and floating card mode built on Base UI.
An anchored floating content card with collision detection, arrow pointer, and soft elevation shadow.
Fast hover and keyboard focus micro-popup rendered in an inverted high-contrast pill with arrow support.
For sighted users to preview rich content available behind an anchor link or button trigger on hover.
Hierarchical flyout menu with submenus, checkboxes, radio groups, and Fluent-inspired slot architecture.
Right-click context menu with cursor anchor positioning, submenus, and multiline slot support.
Desktop application horizontal command menubar with nested submenus and keyboard navigation.
Top-level website navigation header with animated viewports, rotating chevrons, and rich card flyouts.
Layered content panels with pill, line underline, and enclosed card styles, plus vertical orientation.
Accessible navigational trail supporting proportional sizing, icon affixes, and dropdown menus.
Page navigation bar supporting proportional button sizing, customizable next/prev labels, multi-locale number formatting, and bidirectional RTL mirroring.
A composable, responsive sidebar component with collapsible panels and tooltips.
Displays a badge or small status tag styled with custom design tokens.
Displays a versatile surface card supporting default (tint), outline, and ghost variants, 6 semantic OKLCH intents, proportional sm/default/lg geometry (P = R + 2px), and polymorphic interactive states.
A vertically stacked set of interactive headings that each reveal a section of content.
An interactive component which expands/collapses a panel.
A collapsible section featuring a full-width trigger row (with children as the label and a dedicated rotating chevron at the end of the row) and a content div below it.
A responsive table component with default, outline, and surface variants, plus an exported DataTable powered by TanStack Table.
A powerful, feature-rich data table powered by TanStack Table supporting column sorting, multi-row selection, density variants, and accessible pagination.
An image element with a fallback for representing the user, with group and badge support.
A flexible list item component for menus, cards, and activity feeds.
Displays a friendly empty state when no content or results exist.
Augments native scroll with custom cross-browser styling and custom scrollbars.
Displays content within a desired aspect ratio (e.g. 16/9, 4/3, 1/1).
Accessible resizable panel groups and handles with tactile drag state.
A date field component that allows users to enter and edit date values using react-day-picker.
A carousel with motion and swipe gestures built with Embla Carousel.
Beautiful, responsive charts built using Recharts and OKLCH color tokens.
Displays an indicator showing the completion progress of a task.
Callout banner with universal OKLCH semantic intents, 5 styling variants, proportional density scaling, and ergonomic close button support.
Visually or semantically separates content with horizontal or vertical orientation and optional text dividers.
Used to show a placeholder while content is loading with soft pulse animation.
Displays keyboard keycaps and shortcut combinations with clean sans-serif typography, compact low-space footprint, and high-legibility system symbol glyphs.
Renders an accessible form label with required asterisk, optional suffix, leading icons, and density tiers.
A succinct message that is displayed temporarily, handled natively by Base UI Toast.
Unified application root provider orchestrating @wrksz/themes theme switching, native Base UI Toast & Tooltip providers, and Shadcn Typeset vertical rhythm measurements.