Skip to content

All Components

Explore the full library — 121 themeable, accessible components. Click any one to see variants, states and copy-paste code.

9Categories
121Components

121 components

Buttons

Button
Button
Clickable action with variants, sizes and asChild.
Animated Button
Animated Button
Motion-powered button with spring feedback.
Toggle
Toggle
A two-state on/off button.
Toggle Group
Toggle Group
A set of toggles, single or multiple.
Copy Button
Copy Button
Copy text to the clipboard with success feedback.
Button Group
Button Group
Attaches a row or column of buttons into one segmented unit.
Fab
Fab
Floating action button with an optional speed-dial of actions.
Split Button
Split Button
Primary action fused to a dropdown of secondary actions.
Mode Toggle
Mode Toggle
Animated sun ⇄ moon light/dark toggle icon-button.

Forms

Input
Input
Single-line text field with invalid state.
Input Group
Input Group
A composable wrapper that fuses prefix/suffix addons to an Input into one bordered field.
Password Input
Password Input
A password field with a show/hide toggle and an optional strength meter.
Textarea
Textarea
Multi-line auto-sizing text field.
Label
Label
Accessible label tied to a control.
Checkbox
Checkbox
Binary choice with an indicator.
Radio Group
Radio Group
Single choice among options.
Switch
Switch
Toggle a setting on or off.
Select
Select
Composable dropdown with groups.
Combobox
Combobox
Searchable single-select with autocomplete.
Multi Select
Multi Select
Pick multiple values shown as removable chips.
Tags Input
Tags Input
Type and commit free-form tags as removable chips.
Slider
Slider
Pick a value or a range.
Field
Field
Label + description + error layout.
Form
Form
react-hook-form + zod integration.
Input OTP
Input OTP
One-time-code input with slots.
File Dropzone
File Dropzone
Drag-and-drop file upload area.
Number Input
Number Input
Numeric field with steppers, clamping and keyboard control.
Autocomplete
Autocomplete
Free-text input with sync or async suggestions.
Stepper
Stepper
Multi-step wizard progress with optional clickable steps.
Rich Text Editor
Rich Text Editor
Tiptap WYSIWYG editor with a formatting toolbar and HTML output.
Rating
Rating
Star rating input — interactive or read-only, with optional half stars.
Color Picker
Color Picker
OKLCH-native color input on a popover, with an area, hue slider and swatches.
Currency Input
Currency Input
Money field with a currency selector and live thousand/decimal formatting.
Phone Input
Phone Input
International phone field with a country selector, emitting E.164.
Credit Card Input
Credit Card Input
Card number, expiry and CVC with brand detection and Luhn validation.
Floating Label Input
Floating Label Input
Text field whose label floats above on focus or when filled.
Signature Pad
Signature Pad
Canvas signature input with smoothed strokes, undo/clear, and data-URL output.

Data Display

Avatar
Avatar
User image with a fallback.
Avatar Group
Avatar Group
Overlapping avatar stack with a "+N" overflow chip.
Badge
Badge
Small status / category label.
Card
Card
Surface that groups related content.
Table
Table
Styled semantic table primitives.
Data Table
Data Table
TanStack table with sorting, search & faceted filters, pagination, row selection with bulk actions, column visibility, density, and loading/empty/error states.
Metric
Metric
KPI value with trend delta.
Sparkline
Sparkline
Tiny inline line, area, or bar trend chart for stat tiles.
Masonry
Masonry
A responsive CSS multi-column masonry layout for cards and images.
Comparison Slider
Comparison Slider
Drag a divider to reveal a before/after comparison of two layers.
Heatmap
Heatmap
A calendar-style contribution heatmap that buckets daily activity into levels.
Kbd
Kbd
Keyboard key hint.
Empty
Empty
Empty-state placeholder.
Separator
Separator
Visual divider between content.
Skeleton
Skeleton
Loading placeholder shimmer.
Scroll Area
Scroll Area
Custom-styled scroll container.
Code Block
Code Block
Source snippet with header, line numbers and copy.
Code Tabs
Code Tabs
Tabbed code snippets with per-tab copy and a localStorage-synced tab choice.
Collapsible
Collapsible
Animated show/hide for a single section.
Aspect Ratio
Aspect Ratio
Constrain content to a fixed width-to-height ratio.
Tree View
Tree View
Data-driven, accessible hierarchy with keyboard navigation.
Timeline
Timeline
Vertical activity feed with dots, connectors, timestamps and descriptions.
Kanban
Kanban
Drag-and-drop board with cards that reorder and move across columns.
Json Viewer
Json Viewer
Collapsible JSON tree with type-colored values and per-row copy.

Feedback

Alert
Alert
Inline callout banner with semantic variants.
Banner
Banner
Dismissible full-width announcement / promo bar with a CTA.
Spinner
Spinner
Indeterminate loading indicator.
Progress
Progress
Determinate progress bar.
Usage Meter
Usage Meter
Linear or circular quota / billing usage indicator with severity tones.
Toast
Toast
Transient notifications via Sonner.
Alert Dialog
Alert Dialog
Confirm a destructive action.

Overlays

Dialog
Dialog
Modal dialog with header and footer.
Sheet
Sheet
Side-anchored panel.
Drawer
Drawer
Bottom drawer (vaul).
Popover
Popover
Floating content anchored to a trigger.
Notification Center
Notification Center
Bell-trigger inbox with unread badge and a scrollable list.
Hover Card
Hover Card
Preview content on hover.
Tooltip
Tooltip
Short hint on hover or focus.
Dropdown Menu
Dropdown Menu
Actions menu with submenus.
Context Menu
Context Menu
Right-click menu with items, checkboxes and submenus.
Command
Command
⌘K command palette (cmdk).
Lightbox
Lightbox
Full-screen image gallery with thumbnails and keyboard navigation.
Confirmation Dialog
Confirmation Dialog
Ergonomic AlertDialog wrapper for destructive actions with async confirm.

Date & Time

Calendar
Calendar
Date grid (react-day-picker).
Countdown
Countdown
Ticking day/hour/minute/second tiles counting down to a target.
Date Picker
Date Picker
Popover-based date selection.
Date Range Picker
Date Range Picker
Start/end date selection with presets.
Scheduler
Scheduler
Month-view event calendar that lays events onto day cells.
Time Picker
Time Picker
Popover hour/minute (and optional second) selection, 12h or 24h.

Charts

Chart
Chart
Recharts wrapper with tokens.

Premium & Brand

Glass Card
Glass Card
Frosted-glass surface.
Gradient Border
Gradient Border
Aurora gradient border.
Gradient Text
Gradient Text
Gradient-clipped text.
Spotlight Card
Spotlight Card
Cursor-following spotlight.
Scroll Progress
Scroll Progress
A bar or ring that tracks how far a scroll container has been read.
Aurora Background
Aurora Background
Animated aurora backdrop.
Logo Carousel
Logo Carousel
Animated hero logo carousel with reduced-motion fallback.
Marquee
Marquee
Seamless infinite scroller for logos, testimonials, or a ticker.
Morphing Popover
Morphing Popover
Trigger that morphs into a non-modal dialog surface.
Shimmer
Shimmer
Premium shimmer surface.
Reveal
Reveal
Scroll-into-view reveal wrapper.
Animated Number
Animated Number
Number that springs to its target — counts up or down.
Carousel
Carousel
Scroll-snap slide gallery with prev/next, dots and keyboard nav.
Segmented Control
Segmented Control
Single-select toggle row with a thumb that slides between options.
Text Effect
Text Effect
Reveal text by staggering words or characters (fade / blur / slide).
Frame
Frame
Browser/window chrome that frames a screenshot or product mockup.
Dock
Dock
A macOS-style icon dock that magnifies items as the pointer nears.
Border Beam
Border Beam
An animated light beam that travels around an element's border.
Flip Card
Flip Card
A 3D card that flips between a front and a back face.
Tilt Card
Tilt Card
A card that tilts in 3D toward the pointer, with an optional glare.
Magnetic
Magnetic
Wrapper whose content is gently pulled toward the cursor.
Orbit
Orbit
Icons or avatars revolving around a nucleus on pure-CSS rings.
Terminal
Terminal
Animated terminal window that types a scripted shell session.