Components
Browse and interact with all available UI components.
Form Inputs
Input
Textarea
Checkbox
Radio Group
Default
With Default Selected
Disabled
Invalid
Native Select
Default
Small
With OptGroup
Disabled
Invalid
Switch
Select
Basic
With Default Value
With Groups
Small Size
With Disabled Items
Disabled
Align End
Combobox
Basic
With Default Value
With Clear Button
With Groups
With Disabled Items
Disabled
Input Group
With Icon (inline-start)
With Icon (inline-end)
With Text Prefix
With Text Suffix
Both Sides
With Button
With Button (icon-xs)
With Textarea
Disabled
Invalid
Slider
Default
Custom Range (0-200, step 10)
Empty (0%)
Full (100%)
Disabled
Calendar
Default
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Selected Date
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Form Name
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Min/Max Constraints
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date Picker
Basic
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Selected Date
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Form Name
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Min/Max
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Label
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date + Time
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Time Picker
24-Hour (Default)
24-Hour with Value
12-Hour (AM/PM)
12-Hour with Value
With Form Name
With Label
With Seconds (24h)
With Seconds (12h)
Form Layout
Label
Field
Vertical (Default)
Your full name as it appears on documents.
With Error
Horizontal with Switch
Horizontal with Checkbox + Content
You agree to our Terms of Service and Privacy Policy.
Disabled
FieldSet & FieldGroup
FieldSeparator
or
FieldLegend Variants
Legend (Default)
Label Variant
Data Display
Badge
Avatar
Sizes
With Fallback
With Badge
Group
Group (Small)
Group (Large)
Table
Default
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
With Caption
| Invoice | Status | Amount |
|---|---|---|
| INV004 | Paid | $450.00 |
| INV005 | Paid | $550.00 |
With Footer
| Invoice | Status | Amount |
|---|---|---|
| INV006 | Paid | $200.00 |
| INV007 | Pending | $300.00 |
| INV008 | Paid | $100.00 |
| Total | $600.00 | |
Typography
H1
Taxing Laughter: The Joke Tax Chronicles
H2
The People of the Kingdom
H3
The Joke Tax
H4
People stopped telling jokes
Paragraph
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
Blockquote
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
Table
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
List
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners : 20 gold coins
Inline Code
@radix-ui/react-alert-dialog
Lead
A modal dialog that interrupts the user with important content and expects a response.
Large
Small
Email addressMuted
Enter your email address.
Kbd
Single Keys
Key Combinations (KbdGroup)
Inside Tooltip
Progress
Default
With Label & Value
Empty (0%)
Complete (100%)
Partial
Indeterminate
Indeterminate (bare)
Skeleton
Default
Circle
Card Placeholder
Charts
Pagination
Empty
Feedback
Alert
Default
Destructive
With Icon
Destructive with Icon
With Action
Toast
Types
With Title
Persistent
Loading
Overlays
Dialog
Drawer
Directions
With Form
No Close Button
Tooltip
Sides
With Icon Button
Variants
Popover
Default (bottom center)
Top
Left
Right
Align End
With Form Content
Dropdown Menu
Basic
With Checkbox Items
With Radio Items
With Submenu
With Disabled & Groups
Align End
Context Menu
Command
Inline command palette and dialog variant (Cmd+K / Ctrl+K).
Press \u2318K to open the command palette.