shadcn/ui Components
All 60 components with 346 interactive demos — matching official shadcn/ui documentation
1. Accordion
Documentation →Basic
Multiple
Rich Content with Waves
Directed a 12-month cloud migration program for a financial services company, moving 30+ legacy applications to AWS. Managed a team of 8 engineers and coordinated with 4 business units to ensure zero-downtime transitions.
- Infrastructure costs reduced by 40% through right-sizing and reserved instances
- Achieved 99.99% uptime SLA across all migrated services
- Implemented Infrastructure as Code with Terraform for reproducible deployments
2. Alert
Documentation →Demo
Basic
Destructive
Action
Custom Colors
5. Avatar
Documentation →Demo
Basic
Badge
Badge with Icon
Avatar Group
Avatar Group Count
Avatar Group with Icon
Sizes
Dropdown
6. Badge
Documentation →Demo
Variants
With Icon
With Spinner
Link
Custom Colors
10. Calendar
Documentation →Demo
Hijri
Basic
Range Calendar
Month and Year Selector
Presets
Date and Time Picker
Booked dates
Custom Cell Size
Week Numbers
11. Card
Documentation →Demo
Size
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Image
12. Carousel
Documentation →Demo
Sizes
Spacing
Orientation
API
Plugin
13. Chart
Documentation →Demo
Your First Chart
Add a Grid
Add an Axis
Add Tooltip
Add Legend
Tooltip
14. Checkbox
Documentation →Demo
By clicking this checkbox, you agree to the terms.
Invalid
Basic
Description
By clicking this checkbox, you agree to the terms and conditions.
Disabled
Group
Table
| Name | Role | ||
|---|---|---|---|
| Sarah Chen | sarah.chen@example.com | Admin | |
| Marcus Rodriguez | marcus.rodriguez@example.com | User | |
| Priya Patel | priya.patel@example.com | User | |
| David Kim | david.kim@example.com | Editor |
15. Collapsible
Documentation →Default
Order #4189
Basic
Settings Panel
File Tree
16. Combobox
Documentation →Default
Basic
Multiple
Clear Button
Groups
Custom Items
Invalid
Disabled
Auto Highlight
Popup
Input Group
17. Command
Documentation →Default
Basic
Command Palette
Search for a command to run...
Shortcuts
Command Palette
Search for a command to run...
Groups
Command Palette
Search for a command to run...
Scrollable
Command Palette
Search for a command to run...
19. Data Table
Documentation →Demo
| Status | Amount | |||
|---|---|---|---|---|
success | ken99@example.com | $316.00 | ||
success | Abe45@example.com | $242.00 | ||
processing | Monserrat44@example.com | $837.00 | ||
success | Silas22@example.com | $874.00 | ||
failed | carmella@example.com | $721.00 |
20. Date Picker
Documentation →Demo
Basic
Range Picker
Date of Birth
Input
Time Picker
Natural Language Picker
22. Direction
Documentation →LTR and RTL Comparison
DirectionProvider sets the text direction for child components. Compare left-to-right (English) and right-to-left (Arabic) layouts.
Reading Direction Context
The useDirection hook returns the current direction from the nearest DirectionProvider.
LTR Context
Current direction: ltr
RTL Context
Current direction: rtl
25. Empty
Documentation →Basic
Outline
Background
Avatar
Avatar Group
Input Group
26. Field
Documentation →Basic
Input
Textarea
Select
Select your department or area of work.
Slider
Set your budget range ($200 - 800).
Fieldset
Checkbox
Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
Radio
Switch
Choice Card
Field Group
Responsive
29. Input
Documentation →Basic
Your API key is encrypted and stored securely.
Basic
Field
Choose a unique username for your account.
Field Group
We'll send updates to this address.
Disabled
This field is currently disabled.
Invalid
This field contains validation errors.
File
Select a picture to upload.
Inline
Grid
Required
This field must be filled out.
Badge
Input Group
Form
30. Input Group
Documentation →Demo
inline-start
Icon positioned at the start.
inline-end
Icon positioned at the end.
block-start
Header positioned above the input.
Header positioned above the textarea.
block-end
Footer positioned below the input.
Footer positioned below the textarea.
Icon
Text
Kbd
Dropdown
Spinner
Textarea
Custom Input
31. Input OTP
Documentation →Demo
Pattern
Separator
Disabled
Controlled
Invalid
Four Digits
Alphanumeric
Form
32. Item
Documentation →Demo
A simple item with title and description.
Variant
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
Size
The standard size for most use cases.
A compact size for dense layouts.
The most compact size available.
Icon
New login detected from unknown device.
Avatar
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Group
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Link
Dropdown
33. Kbd
Documentation →Demo
Group
Use Ctrl + BCtrl + K to open the command palette
Tooltip
Input Group
41. Radio Group
Documentation →Demo
Description
Standard spacing for most use cases.
More space between elements.
Minimal spacing for dense layouts.
Choice Card
Fieldset
Disabled
Invalid
44. Select
Documentation →Default
Align Item With Trigger
Toggle to align the item with the trigger.
Groups
Scrollable
Disabled
Invalid
45. Separator
Documentation →Default
Vertical
List
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
51. Spinner
Documentation →Default
Custom
Size
Badge
Input Group
Empty
52. Switch
Documentation →Default
Description
Focus is shared across devices, and turns off when you leave the app.
Choice Card
Disabled
Invalid
You must accept the terms and conditions to continue.
Size
53. Table
Documentation →Default
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Actions
| Product | Price | Actions |
|---|---|---|
| Wireless Mouse | $29.99 | |
| Mechanical Keyboard | $129.99 | |
| USB-C Hub | $49.99 |
54. Tabs
Documentation →Default
Line
Vertical
Disabled
Icons
55. Textarea
Documentation →Default
Field
Enter your message below.
Disabled
Invalid
Please enter a valid message.
58. Toggle Group
Documentation →Default
Outline
Size
Spacing
Vertical
Disabled
Custom
Use font-normal to set the font weight.
60. Typography
Documentation →Demo
Taxing Laughter: The Joke Tax Chronicles
Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
The King's Plan
The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
The Joke Tax
The king's subjects were not amused. They grumbled and complained, but the king was firm:
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners : 20 gold coins
As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
Jokester's Revolt
Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
The People's Rebellion
The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
h1
Taxing Laughter: The Joke Tax Chronicles
h2
The People of the Kingdom
h3
The Joke Tax
h4
People stopped telling jokes
p
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-dialogLead
A modal dialog that interrupts the user with important content and expects a response.
Large
Small
Muted
Enter your email address.