Components
179 components across 9 categories. Pick one to see it live, copy the usage, and read its props.
Accordion
Accordion/collapsible sections component.
Alert
Alert component for contextual feedback messages.
Avatar
Avatar component with optional status indicator.
Badge
Style-agnostic badge component using CSS custom properties.
Button
Style-agnostic button component using CSS custom properties.
Callout
Callout/blockquote component.
Card
Style-agnostic card container using CSS custom properties.
Checkbox
Code Snippet
Code block with copy button and language badge.
Collapsible
Collapsible/expandable section component.
Dropdown
Dropdown menu component.
Dropdown Menu
Style-agnostic dropdown menu component.
Input
Kbd
Keyboard shortcut display component.
Meter
Style-agnostic meter / stacked progress component.
Modal
Modal dialog overlay component.
Pagination
Pagination controls component.
Popover
Popover overlay component.
Progress
Progress bar component for task completion.
Radio
Rating
Star rating component.
Select
Skeleton
Skeleton loading placeholder component.
Spinner
Style-agnostic spinner component using CSS custom properties.
Switch
Style-agnostic toggle switch component using CSS custom properties.
Tabs
Tab navigation component.
Tag
Style-agnostic tag/chip component using CSS custom properties.
Textarea
Toast
Style-agnostic toast notification component using CSS custom properties.
Toggle Group
Segmented toggle button group component.
Tooltip
Tooltip component.
Segmented Progress
Style-agnostic segmented progress bar with labeled steps.
Breadcrumb
Breadcrumb navigation component.
Breadcrumb Dropdown
Breadcrumb navigation with overflow collapse into dropdown.
Nav
Nav Group
Nav Item
Nav Menu
Horizontal navigation menu component.
Scroll Spy
Style-agnostic scroll spy component.
Scroll To Top
Floating scroll-to-top button that appears after a scroll threshold.
Sidebar
Sidebar navigation component.
Sidebar Nav
Stepper
Step indicator/wizard progress component.
Wizard
Style-agnostic multi-step form wizard using CSS custom properties.
Sticky Header
Sticky header component.
Table Of Contents
Table of contents navigation component.
Toolbar
Toolbar component with button groups.
Color Picker
Color picker with swatches component.
Combobox
Searchable select (combobox) component.
Cron Input
Visual cron expression builder with human-readable preview.
Currency Input
Numeric input with currency symbol prefix and formatting hints.
Date Picker
Server-rendered calendar date picker component.
Dependent Select
Cascading dropdown that reloads options when a parent field changes.
Fieldset
Fieldset with legend component.
Form Array
Style-agnostic form array component.
Form Group
Form group wrapper component.
Form Validation
Renders inline validation error for a single form field.
Input Group
Input group wrapper component (prefix/suffix addons).
Mentions Input
Text input that triggers a user mention dropdown on @ character.
Multi Select
Multi-select checkbox list component.
Number Stepper
Numeric +/- stepper input component.
Otp Input
One-time code input component.
Rich Select
Select dropdown where each option can include icons, images, descriptions,
Signature Pad
Canvas-based signature capture pad.
Tag Input
Tag input component for adding/removing tags.
Time Picker
Style-agnostic time picker component using CSS custom properties.
Voice Input
Mic button with recording animation for speech input.
Activity Feed
Real-time activity feed with streaming support.
Audit Log
Style-agnostic audit log table component.
Code Block
Code block with syntax highlighting component.
Terminal
Monospace terminal emulator display with ANSI color support.
Comparison Table
Feature comparison table for SaaS plans / product tiers.
Data Card Grid
Filterable card grid layout.
Data Grid
Editable spreadsheet-like data grid with cell editing, column resize,
Data Table
Data table component for tabular data display.
Description List
Description list (term/detail pairs) component.
Diff Viewer
Side-by-side or unified text diff viewer.
Expandable Text
Style-agnostic expandable text component using CSS line-clamp.
Inline Edit
Inline edit component for in-place text editing.
Json Viewer
Interactive collapsible JSON tree viewer.
Log Viewer
Monospace streaming log display with level coloring.
Markdown
Render Markdown text as sanitized HTML.
Pivot Table
Configurable pivot table that aggregates data by row/column dimensions.
Source Citation
Inline footnote marker with hover popover showing source details.
Table
Timeline
Timeline component.
Tree View
Expandable tree view component.
Truncated List
Style-agnostic truncated list component.
Virtual List
Paginated virtual list component.
Bar Chart
Style-agnostic SVG bar chart using CSS custom properties.
Calendar Heatmap
Style-agnostic SVG calendar heatmap (GitHub contribution style).
Calendar View
Month/week/day calendar view with event slots.
Gantt Chart
SVG Gantt chart for project management timelines.
Gauge
SVG donut/gauge chart component.
Heatmap
Style-agnostic SVG heatmap using CSS custom properties.
Line Chart
Style-agnostic SVG line chart using CSS custom properties.
Pie Chart
Style-agnostic SVG pie/donut chart using CSS custom properties.
Sparkline
Style-agnostic inline sparkline using SVG.
Treemap
Style-agnostic SVG treemap using CSS custom properties.
Stat Card
Style-agnostic stat card component using CSS custom properties.
Aspect Ratio
Aspect ratio container component.
Avatar Group
Style-agnostic avatar group using CSS custom properties.
Carousel
Image carousel/slideshow component.
File Dropzone
Drag-and-drop file upload zone component.
File Tree
File browser tree with icons, expand/collapse, and selection.
Image Cropper
Drag-to-crop image component with optional aspect ratio lock.
Image Lightbox
Full-screen image viewer overlay with navigation.
Image Upload Preview
Multi-image upload with thumbnail preview.
Map Picker
Click-to-pick location on a Leaflet/OSM map.
Org Chart
Hierarchical org chart / tree visualization.
Responsive Image
Picture element with srcset, lazy loading, and blur-up placeholder.
Agent Step
AI agent tool-use step card.
Approval Gate
Inline confirmation card for AI agent actions with risk levels.
Connection Status
Slim bar showing WebSocket state.
Content Loader
Style-agnostic content loader / suspense component.
Empty State
Empty state placeholder component.
Error Boundary
Style-agnostic error boundary component.
Error Page
Styled error page with code, title, message, and action.
Live Indicator
Shows 'Alice is typing...' style indicator per field.
Loading Overlay
Loading overlay component.
Notification Badge
Style-agnostic notification badge using CSS custom properties.
Notification Center
Notification bell with dropdown list component.
Notification Popover
Style-agnostic notification popover using CSS custom properties.
Page Alert
Style-agnostic full-width page alert / banner component.
Server Event Toast
Status Dot
Style-agnostic animated status indicator dot using CSS custom properties.
Status Indicator
Style-agnostic status indicator with colored dot and optional label.
Thinking Indicator
Animated status indicator for AI processing states.
App Shell
Application shell layout component.
Bottom Sheet
Style-agnostic bottom sheet / drawer component.
Dashboard Grid
CSS Grid layout with draggable and resizable dashboard panels.
Fab
Floating action button component.
Hover Card
Style-agnostic hover card using CSS custom properties.
Masonry Grid
Pinterest-style masonry grid layout.
Page Header
Page-level header with title, subtitle, and optional actions.
Resizable Panel
Container with a drag-to-resize handle.
Ribbon
Corner ribbon overlay badge.
Scroll Area
Scrollable area container component.
Sheet
Sheet/drawer overlay component.
Split Pane
Split pane/resizable layout component.
Animated Number
Animated counting number display.
Announcement Bar
Announcement/banner bar component.
Chat Bubble
Single chat message bubble with sender avatar, timestamp, and delivery status.
Collab Selection
Highlights text or cell ranges selected by other users.
Command Palette
Command palette/search overlay component.
Context Menu
Context menu (right-click menu) component.
Conversation Thread
Chat-style message thread with sender avatars, timestamps, and grouping.
Cookie Consent
Style-agnostic cookie consent banner.
Copy Button
Copy-to-clipboard button component.
Copyable Text
Inline click-to-copy text with "Copied!" tooltip feedback.
Countdown
Style-agnostic countdown timer component.
Cursors Overlay
Overlay showing other users' cursor positions in real-time.
Export Dialog
Style-agnostic export dialog component.
Feedback Widget
Thumbs up/down, star rating, or emoji feedback widget.
Filter Bar
Filter bar component with filter controls.
Icon
Icon component wrapper.
Infinite Scroll
Style-agnostic infinite scroll component.
Import Wizard
Style-agnostic import wizard component.
Kanban Board
Kanban board component.
Live Counter
Animated counter updating in real-time via WebSocket push.
Markdown Editor
Split-pane markdown editor with live preview.
Markdown Textarea
Style-agnostic textarea with markdown preview toggle.
Model Selector
Rich select for AI model selection with metadata display.
Multimodal Input
Text area with optional file attachment and voice input buttons.
Presence Avatars
Stacked avatar group showing online/present users with status dots.
Progress Circle
Style-agnostic circular progress indicator using SVG stroke-dasharray.
Prompt Editor
Template editing with {{variable}} highlighting.
Qr Code
Pure SVG QR code generator.
Reactions
Slack-style emoji reactions with live-updating counts.
Relative Time
Displays a datetime as relative text ("3 hours ago") with optional
Rich Text Editor
Basic rich text editor component (contenteditable + toolbar).
Skeleton Factory
Style-agnostic skeleton loading state generator.
Sortable Grid
2D drag-and-drop grid layout.
Sortable List
Drag-and-drop reorderable list.
Split Button
Split button with primary action and dropdown menu.
Streaming Text
Renders text arriving incrementally via WebSocket with typing cursor.
Theme Toggle
Light/dark/system theme toggle component.
Token Counter
Compact progress display showing token usage versus limit.
Tour
Product tour with spotlight highlights and step navigation.