Open-source component catalogue
57 deliberate foundations.
Each category ships editable React and TypeScript source, a shadcn-compatible registry payload, documented semantics, tested keyboard behavior, RTL, dark mode, and reduced motion.
- 57
- component categories
- 7
- product families
- MIT
- source licence
Accordion
Vertically stacked disclosure sections with coordinated open state.
Alert
Static or live feedback with a restrained status reservoir.
Alert Dialog
A modal confirmation surface for consequential decisions.
Aspect Ratio
A predictable media frame that preserves a numeric ratio.
Avatar
Image, fallback, group, and named presence status.
Badge
A non-interactive semantic label in solid or translucent fruit material.
Breadcrumb
Hierarchy navigation with current-page and collapsed-path parts.
Button
The approved fruit-gel action with chewy press physics.
Button Group
Related native buttons joined by quiet shared material.
Calendar
A locale-aware single-date grid with month navigation and constraints.
Card
Passive, link, and button surfaces held in one continuous gel-pocket frame.
Carousel
Controlled or uncontrolled labelled slides with finite or looping movement.
Checkbox
A native checkbox with mixed, validation, disabled, and read-only states.
Collapsible
One trigger and panel for optional supporting content.
Combobox
An editable option picker with filtering and collision-aware popup.
Command
A filterable grouped action surface with decorative shortcuts.
Context Menu
Secondary commands opened by context click, keyboard, or long press.
Data Table
A generic typed table with filtering, sorting, paging, and selection.
Date Picker
A formatted trigger composing Gummy Popover and Calendar.
Dialog
A modal reading plane with responsive focus containment.
Direction
A scoped native direction boundary aligned with Base UI behavior.
Drawer
A mobile-first bottom task surface built on modal dialog behavior.
Dropdown Menu
Compact commands with typeahead, submenus, and selection items.
Empty
A structured zero-state with media, title, description, and actions.
Field
One labelled control with descriptions, validation, and layout state.
Hover Card
A supporting preview for a focused or hovered link.
Input
A native single-line field with descriptions, adornments, and feedback.
Input Group
Native input, addons, and real button actions in one shell.
Input OTP
Four to eight numeric slots with paste distribution and form value.
Item
A dense passive, link, or button row with media, copy, and actions.
Kbd
Keyboard notation for shortcuts and key sequences.
Label
A native label with required, optional, disabled, and read-only cues.
Menubar
Coordinated application command menus with compact scanning.
Native Select
The platform single-select picker with Gummy shell and read-only extension.
Navigation Menu
Site discovery links arranged in a shared responsive popup viewport.
Pagination
Current-page navigation with previous, next, and ellipsis parts.
Popover
A non-modal contextual surface with title, description, and close parts.
Progress
Determinate or indeterminate task progress with a visible label.
Radio Group
A native fieldset of same-name radios with controlled state and RTL.
Resizable
A bounded two-panel split with pointer and keyboard control.
Scroll Area
A native scroll viewport with custom overflow-only scrollbars.
Select
A non-editable custom picker for richer option content.
Separator
A quiet horizontal or vertical divider with decorative or semantic mode.
Sheet
A modal side workflow with configurable logical edge.
Sidebar
A controlled workspace shell with responsive navigation panel and inset.
Skeleton
A decorative loading placeholder with reduced-motion fallback.
Slider
Single or range numeric selection on a touch-safe track.
Sonner
Polite or urgent toast workflows with actions, promises, and swipe dismissal.
Spinner
A compact named loading indicator with reduced-motion state.
Switch
A binary Base UI control with one connected track and gel thumb.
Table
Composable native table sections, captions, rows, headers, and cells.
Tabs
One shared selection rail coordinating labelled tab panels.
Textarea
A native multiline field with validation, resizing, and live count.
Toggle
A pressed-state button for one independent option.
Toggle Group
Single or multiple pressed choices coordinated as a labelled group.
Tooltip
A short descriptive popup with shared delay and collision handling.
Typography
Headings, text, eyebrow, blockquote, and inline-code foundations.