Small details.
Better interfaces.
A collection of carefully built, accessible components ready to make your own. Explore, try them out and find your next piece.
npx zunoui@latest initActions
6Button
Clear actions with accessible variants, sizes and states.
5 examples →Button Group
Related actions with shared radii and borders.
3 examples →ConfirmAction
A reusable confirmation that waits for the operation and shows its error instead of closing.
3 examples →CopyButton
Copy to clipboard with confirmation and error handling; a stable accessible name.
1 example →Toggle
A two-state button with a recognizable pressed state.
3 examples →ToggleGroup
Grouped toggles with single or multiple selection and preserved semantics.
4 examples →Forms
18Calendar
Date selection with clear navigation, localization and disabled days; built on react-day-picker.
4 examples →Checkbox
Recognizable checked and indeterminate states, even without color.
1 example →Combobox
Selection with search: type to filter, pick one or many, and a clear empty state.
3 examples →DatePicker
A field-like trigger that opens Calendar in a popover, with localized formatting and form support.
4 examples →Field
Label, control, description and errors wired together in a single field.
3 examples →FormSection
Semantic form groups with a legend, description and shared spacing.
1 example →Input
Text input with visible focus and validation built in with Field.
3 examples →Input Group
Prefixes, suffixes and actions aligned with the field, without breaking its semantics.
4 examples →InputOTP
One-time codes with paste, autofill, errors and an easy way to recover.
3 examples →Label
Correct association with the control and a shared typographic hierarchy.
1 example →Native Select
The browser's own select, styled to match the rest of the form.
3 examples →PasswordInput
Password input with show/hide that never loses focus.
1 example →RadioGroup
Single choice among visible options, with comfortable targets and optional descriptions.
4 examples →SearchInput
Search with an icon, clear button and loading state; no built-in networking.
1 example →Select
Single-option selection with a portaled popup, keyboard support and accessible states.
2 examples →Slider
Pick a value or a range by dragging or with the keyboard, with the value always readable.
3 examples →Switch
A clear on/off state with an associated label; not a blanket replacement for checkbox.
1 example →Textarea
Multi-line text input with adjustable height and accessible states.
3 examples →Layout
14Aspect Ratio
Media in proportion, without fixing the size of the layout around it.
3 examples →Card
A surface with consistent anatomy and padding; width and outer margins are up to you.
1 example →Cluster
Horizontal grouping with wrap for actions, tags and filters.
2 examples →Container
Width limits, side padding and reading or dashboard variants.
1 example →Direction
Right-to-left behavior for keyboard and popups, separate from the theme.
1 example →Item
Rows of content with media, metadata and actions laid out the same way everywhere.
4 examples →PageHeader
A view's title, description and actions, with a responsive layout.
1 example →ResponsiveGrid
Collections that adapt to the available width, without forcing twelve columns.
1 example →ScrollArea
Usable scrolling with thin overlay scrollbars, without hiding content or controls.
3 examples →SectionHeader
A section's heading with metadata and a secondary action, one level below PageHeader.
3 examples →Separator
Structural separation that avoids unnecessary semantic roles.
1 example →Sidebar
App navigation that expands, collapses to an icon rail and becomes a drawer on phones.
3 examples →SplitLayout
A main area and a secondary panel side by side, with a configurable width, a collapsible panel and no breakpoints.
2 examples →Stack
Vertical rhythm with a semantic gap, no hidden margins.
1 example →Navigation
10Breadcrumb
Hierarchical location with reasonable truncation and accessible names.
3 examples →Command
A searchable list of actions with groups, shortcuts and a clear empty state.
2 examples →CommandPalette
Actions and navigation behind ⌘K, with groups, keywords, shortcut hints and a configurable list of commands.
1 example →NavigationMenu
Product or marketing navigation with an understandable structure and one shared, resizing panel.
2 examples →PageNavigation
An on-this-page table of contents with anchor links and the active section, without a router.
1 example →Pagination
Pages, the current one and step controls with explicit labels.
3 examples →Stepper
Progress through a multi-step flow; the steps a user may revisit depend on your validation.
2 examples →Tabs
Sections with distinct selection and focus states.
8 examples →UserMenu
The signed-in account, its preferences and actions in a menu; authentication stays in your app.
2 examples →WorkspaceSwitcher
Switch between organizations or spaces, with search and a pending state while the switch happens.
1 example →Data display
15Accordion
Stacked sections that expand in place, with subtle dividers and consistent keyboard navigation.
3 examples →Avatar
User image with an initials fallback when it fails to load.
3 examples →Badge
Compact labels with contrast and a limited set of variants.
1 example →BulkActionsBar
The selected count, a way to clear the selection and the actions that apply to every selected item.
2 examples →Collapsible
Show and hide one region of content, without a parallel styling pattern.
2 examples →ComparisonTable
Options side by side across shared dimensions, with clear headers and a readable layout on phones.
2 examples →DataToolbar
Search, filters, density and actions above a data view, without tying them to a table engine.
2 examples →DescriptionList
Term and value pairs on a real <dl>, stacked or side by side.
2 examples →Icon
A wrapper for lucide-react icons with consistent sizes and accessible defaults.
3 examples →Kbd
Readable keyboard shortcuts that do not look like clickable actions.
3 examples →StatCard
A metric with its comparison and a textual trend, without installing a chart library.
2 examples →StatusBadge
Semantic status with text, an optional indicator and a consistent visual variant.
1 example →Table
A semantic tabular base with consistent alignment and density; sorting, filtering and pagination belong to your data layer.
4 examples →Timeline
Events in order, each with a status, an author, a time and optional details.
2 examples →Typography
Text recipes on the ZUNO scale over semantic HTML, with no hidden margins.
3 examples →Feedback
8Alert
Contextual messages with hierarchy, an icon and optional actions.
2 examples →ConnectionStatus
The state of a connection your app reports: connected, connecting, degraded or disconnected.
2 examples →Empty
Absence of data, context and the next action when there is one.
1 example →Progress
Determinate or indeterminate progress, without made-up percentages.
3 examples →SaveIndicator
Whether the user's work is saved: no changes, pending, saving, saved or failed, as reported by your save call.
2 examples →Skeleton
Reserves space with reduced motion; no endless fake loading.
1 example →Spinner
A discreet indicator with an accessible, contextual description.
1 example →Toast
A brief, non-blocking notice that appears and dismisses itself; renders in a portal.
1 example →Overlays
7AlertDialog
Modal confirmation for destructive actions; requires an explicit decision.
1 example →Dialog
A modal window with focus trapping, Escape to close and a backdrop; renders in a portal.
4 examples →Drawer
A bottom panel that adapts to mobile; swipe to dismiss, but never only by gesture.
2 examples →DropdownMenu
An action menu anchored to a trigger; keyboard navigable and rendered in a portal.
2 examples →Popover
Contextual content anchored to a trigger and themed correctly inside its portal.
3 examples →Sheet
A side panel with coherent structure and spacing, from any edge.
2 examples →Tooltip
A short description on focus or hover; renders in a portal with the correct theme.
2 examples →A catalog that grows with you.
These are ZUNO's first components. Every addition ships with real examples and its source code.