Components
Complete component library reference
Buttons
Primary, secondary, ghost, danger, and outline variants in multiple sizes
Primary
Secondary
Ghost
Danger
Outline Primary
Badges
Status indicators and labels in all semantic colors
Default (md)
Small (sm)
Avatars
User avatars with initials in various sizes and an avatar group stack
Sizes
Color variants
Avatar Group (stacked)
Inputs
Text inputs in default, icon, disabled, error, and success states
Please enter a valid email address
Email address is valid
Toggles
On/off toggle switches with disabled states
Spinners
Loading indicators in multiple sizes and colors
Cards
Container layouts for grouping related content
Default Card
A simple card with padding, border, and background. Suitable for wrapping any content block.
Card with Header
This card has a distinct header, body, and footer section separated by borders.
Glass Card
A translucent card with backdrop blur, ideal for overlaying on images or gradients.
Total Revenue
$45,231
+12.5% from last month
Alerts
Contextual feedback messages with icons and dismiss support
Success
Your changes have been saved successfully.
Warning
Your session will expire in 5 minutes.
Error
Failed to save changes. Please try again.
Info
A new software update is available for download.
Tabs
Underline and pill tab navigation styles
Underline Tabs
Content for the selected tab would appear here.
Pill Tabs
Content for the selected pill tab would appear here.
Modals
Dialog overlays for confirmations and focused tasks
Drawers
Slide-in panels from the left or right edge
Toast Notifications
Transient feedback messages that auto-dismiss