Components
83+ components organized by category. Click any component to view its documentation, live preview, and usage examples.
Layout
11 componentsStructure and organize page content.
Typography
NewHeading, Text, Paragraph and Link components
Card
Versatile content container with variants
Badge
Status indicators and labels
Avatar
User profile images with fallback and groups
List
NewData-driven list with grid and bordered modes
Descriptions
NewKey-value data display for detail pages
Separator
Visual divider between content
Scroll Area
Custom scrollbar for any container
Collapsible
Expandable content sections
Resizable
Drag-to-resize panel groups
Tag
Compact label with input variant
Inputs
20 componentsCollect and validate user input.
Button
Trigger actions with multiple variants
Input
Text entry with multiple styles
Input Number
NewNumeric input with +/- controls and precision
Textarea
Multi-line text input
Select
Dropdown option selector
Combobox
Searchable select with multi-select
Segmented
NewSliding segmented control
Checkbox
Checkable input with label
Radio Group
Single-choice radio buttons
Switch
Toggle between two states
Slider
Range value picker
Rating
Star rating input
Color Picker
NewPick colors with swatches and hex input
Time Picker
NewScroll-based time selection (12/24h)
Calendar
Date picker calendar
Date Picker
Date and range selection
Upload
NewDrag-and-drop file upload with progress
OTP Input
One-time password input
Toggle
Two-state toggle button
Form
React Hook Form integration
Navigation
13 componentsHelp users move through your app.
Menu
NewCollapsible sidebar and horizontal nav
Tabs
Switch between content panels
Breadcrumb
Show current page location
Pagination
Navigate between pages
Stepper
Multi-step progress indicator
Dropdown Menu
Action menu triggered by button
Context Menu
Right-click action menu
Command
Searchable command palette
Sheet
Side panel overlay
Drawer
Bottom sheet drawer (vaul)
Carousel
Embla-powered slideshow
Hover Card
Rich preview on hover
Popover
Rich floating content
Data Display
10 componentsDisplay and visualize structured data.
Table
HTML table primitives
Data Table
Full-featured table with TanStack
Image
NewViewer with grid and fullscreen lightbox
Tree
NewRecursive tree with checkboxes and icons
Transfer
NewDual-list component picker
QR Code
NewGenerate scannable QR codes
Code Block
Syntax-highlighted code display
Timeline
Vertical event sequence
Statistic
Animated metric display
Empty
Placeholder for empty content
Charts
5 componentsVisualize data beautifully with Recharts.
Feedback
12 componentsInform users about app state.
Alert
Contextual feedback messages
Alert Dialog
Confirmation dialog
Dialog
Modal overlay for actions
Toast
Temporary notification messages
Skeleton
Loading placeholder shimmer
Spinner
Loading indicator
Progress
Progress bars and indicators
Accordion
Expandable FAQ sections
Tooltip
Hover-triggered info overlay
Result
NewSuccess / error / 404 feedback pages
Tour
NewStep-by-step onboarding guide
Watermark
NewCanvas-rendered watermark overlay
AI
1 componentsReady-to-use AI interface components.
WOW Effects
11 componentsEye-catching animated components for landing pages.
Float Button
NewFixed action button with group and back-to-top
Aurora Background
Animated gradient aurora
Animated Beam
Connection beam animation
Marquee
Infinite scrolling ticker
Spotlight
Mouse-following spotlight
Particle System
Interactive particle field
Magic Card
Mouse-tracking gradient card
Bento Grid
Asymmetric feature grid
Border Beam
Animated glowing border
Animated Text
Text reveal and number counter
Meteors
Falling meteor animation