— Components Library
108+ Components.
Atomic UI primitives — buttons, inputs, charts, overlays. 89 web + 19 React Native — fully typed, dark-mode native, with live previews.
Button
Solid, outline, ghost, and destructive variants with icon and loading state support.
Marquee
Infinite-scrolling row of children — logos, testimonials, badges. Pure CSS, fade edges, pause-on-hover.
Rating
Interactive 0..N star rating with half-step support and full keyboard control.
QR Code
Theme-aware QR code generator with adjustable size, error-correction level, and optional center logo.
Code Block
Syntax-highlighted code preview powered by Shiki, with copy button, line numbers, and line highlights.
Comparison
Before / after image slider with horizontal or vertical orientation and full keyboard support.
Avatar
User avatar with image, fallback initials, and optional status indicator.
Badge
Status and category labels in default, secondary, destructive, and outline variants.
Card
Composable card with header, title, description, content, and footer slots.
Progress
Progress bar for task completion, upload progress, and loading states.
Separator
Horizontal or vertical visual divider.
Avatar Group
Stacked overlapping avatars with overflow count for team and member lists.
Logo Carousel
Auto-scrolling logo strip for marketing social-proof sections.
Input
Text input field with full HTML input attribute support and accessible labeling.
Tabs
Accessible tabbed interface built on Radix UI Tabs with keyboard navigation.
Skeleton
Layout-mirroring skeleton loaders for async content — never plain spinners.
Dialog
Accessible modal dialog with focus trap, animation, and portal rendering.
Texture Card
Premium textured card surface with subtle gradient layers — for hero blocks and stat cards.
Checkbox
Accessible checkbox with indeterminate state and label support.
Switch
Toggle switch for boolean settings with smooth animation.
Slider
Range slider with draggable handle and configurable min/max/step.
Radio Group
Single-choice radio button group with label, helper text, and disabled states.
Tooltip
Hover tooltip with configurable delay, placement, and content.
Popover
Floating popover with configurable placement and focus management.
Sheet
Slide-in panel from any edge with backdrop overlay.
Select
Dropdown select with options, groups, search, and full keyboard navigation.
Combobox
Autocomplete combo box with searchable options and keyboard navigation.
Date Picker
Calendar-based date picker with input field and range selection support.
Form
Form primitives integrated with React Hook Form and Zod schema validation.
File Upload
Drag-and-drop file upload with preview, validation, and progress.
Field
Label + input + helper / error wrapper — the building block for every form row.
Password Input
Password field with show/hide toggle and accessible labeling.
Search Input
Search-styled input with icon, clear button, and keyboard handling.
Step Form
Multi-step form pattern with progress indicator and per-step validation.
Array Field
Dynamic array form field for repeating row inputs with add / remove controls.
Object Field
Nested object form section with grouped fields and collapsible state.
Auto Form
Schema-driven auto-generated form from a Zod schema — labels, helpers, and validation.
Tags
Multi-select tag input with type-to-add, autocomplete suggestions, validation, and max-tags limit.
Color Picker
Inline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.
Breadcrumb
Path-style hierarchy navigation with separators and overflow handling.
Hotkey Badge
Compact keyboard shortcut chip — ⌘K, ⇧⌘P, etc.
Hotkeys
Keyboard shortcut reference list grouped by section.
Stat
KPI metric card with trend indicator, icon, and period comparison. Group with StatGroup.
Data Table
Paginated, searchable data table with sortable columns and loading state.
Property List
Key-value metadata display for detail panels and settings.
Timeline
Chronological event list with icons, connectors, and timestamps.
Persona
User identity card combining avatar, name, role, and status.
Icon Badge
Iconographic status badge with color tokens — for activity feeds and notifications.
Command Item
Single-row primitive for command menus — leading icon, label, hotkey badge.
Data Grid
Advanced data grid with row selection, column visibility, and virtual scrolling.
Empty State
Illustration + heading + call-to-action for empty data views.
Area Chart
Smooth gradient area chart built on Recharts with series, tooltip, and legend.
Bar Chart
Grouped and stacked bar chart built on Recharts with custom tooltip.
Line Chart
Multi-series line chart with dot markers, legend, and tooltip.
Sparkline
Compact inline trend chart for embedding in stat cards and tables.
Heatmap
Cell-grid heatmap with color ramp legend — usage, density, and correlation matrices.
Bar List
Tremor-style ranked bar list with values and optional links — top sources, top pages.
Activity Heatmap
GitHub-style yearly activity contribution grid with hover tooltips.
Beacon
Pulsing onboarding beacon dot for highlighting new features and call-to-action targets.
Tour
Step-by-step product tour overlay with anchored tooltips and progress indicator.
Banner
Alert banner with info, success, warning, error, and neutral variants plus dismiss.
Loading Overlay
Full-area blocking spinner overlay for async views — drop-in for any container.
Stepper
Multi-step progress indicator for forms, onboarding, and wizards.
Toast
Stacked toast notifications with success / error / info / warning variants and actions.
App Shell Layout
Full composable app shell with sidebar, navbar, page header, and body slots.
Split Page
Two-panel layout with list and detail panes for email/file browsers.
Stack
Flex-based HStack and VStack layout primitives with gap, align, and justify.
Page Layout
Page shell with header, actions, and body — for settings, forms, and dashboards.
Container
Width-constrained content container with sm / md / lg / xl size variants.
Resize Box
Drag-handle resizable panel container — for split panes and adjustable sidebars.
Structured List
Sectioned settings-style list with icons, descriptions, and right-side content.
Bare List
Minimal unstyled list primitive — for when you want a list without ornamentation.
Project Grid
Card grid for project listings — title, description, metadata, and action menu.
Media Grid
Image / media tile grid with hover details and aspect-ratio preserved.
Tree
Recursive expandable tree view with selection, drag-reorder, and virtualization for 1000+ nodes.
Event Calendar
Month / week / day calendar with click-to-create, drag-to-resize events, and chapter colors.
Image Crop
Drag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.
Video Player
HTML5 video player with custom Tailwind controls, scrubber, volume, fullscreen, and chapters.
Animated Number
Smooth animated number ticker — for stat counters and metric reveals.
Gradient Heading
Gradient-fill heading text with multiple presets — for hero sections.
Typography
Heading + body + caption + code typography ramp — the type system at a glance.
Typewriter
Character-by-character typewriter text animation with configurable speed.
Text Reveal (Words)
Word-by-word text reveal animation triggered on scroll.
Text Reveal (Chars)
Character-by-character text reveal animation for headlines.
Theme Switch
Segmented dark / light / system theme switcher with smooth icon transitions.
Color Scheme Select
Color palette picker dropdown — switch between branded color schemes.
Accordion
Collapsible sections with smooth spring animation and keyboard support — single + multiple modes.
Scroll Area
Custom scrollbar with cross-browser styling consistency — vertical, horizontal, both.
Dropdown Menu
Radix dropdown menu with groups, separators, shortcuts, icons, checkboxes, and radio items.
Showing 89 of 89 web components · live preview available