Showcase of all available components and their variants
Primary application colors and backgrounds
Background
Foreground
Primary
Secondary
Muted
Accent
Card
Popover
Feedback and state indication colors
Destructive
Error
Warning
Info
Success
Data visualization color palette
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Borders, inputs, and focus states
Border
Input
Ring
Overlay
Navigation sidebar color scheme
Sidebar
Sidebar Primary
Sidebar Accent
Sidebar Border
All available button styles and sizes
Variants
Sizes
Display important messages to users
Display simple message dialogs with OK button
Request user confirmation for important actions
Collect user input with a dialog
Display temporary notification messages
Text inputs and labels
Please enter a valid email address
Dropdown selection — aligns with input and button sizing
Please select a fruit
Multi-line text input
Boolean selection
Single choice from a set
Toggle a setting on or off
Select a value from a range
Value: 50
Inline date selection — renders in UTC
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Selected: None
A popover calendar behind a button trigger
Value: (empty)
Pick a start and end date in one popover
Value: (empty)
Inputs composed with icons, text affixes, and buttons
Typography components
This is a paragraph of text using the Text component. It provides consistent styling across the application.
Card description goes here
This is the card content area.
With different content
Cards are versatile containers for content.
Showcasing grid layout
Cards adapt to their container.