shadcn/ui Components
Official shadcn/ui components built with Radix UI and Tailwind CSS v4
Buttons
Icon Button
Button Group
Horizontal Button Group:
With different variants:
Full width:
Vertical orientation:
Card
Form
Badges
Chips
Basic Chips
Clickable Chips
Deletable Chips
Sizes
Alerts
Heads up!
Error
Warning
Accordion
Use this accordion to group related settings or documentation. It animates open/closed and supports custom headers.
Dialog
Dropdown Menu
Select
Multi Select
Switch
Radio Group
Tabs
Tooltip
Skeleton
Spinner
Sizes
Color Variants
Loading States
Loading data...
Please wait while we process your request
Separator
Radix Primitives
An open-source UI component library.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body 1: The quick brown fox jumps over the lazy dog. This is the default body text.
Body 2: Slightly smaller text for secondary content.
Subtitle 1: Medium weight subtitle text
Subtitle 2: Smaller subtitle text
Caption: Small text for captionsOverline: UPPERCASE OVERLINE TEXTPrimary color text
Secondary color text
Muted color text
Destructive color text
Warning color text
Success color text
Info color text
Left aligned text (default)
Center aligned text
Right aligned text
This is a very long text that will be truncated with ellipsis when it exceeds the container width
Text with gutter bottom margin
Container
Small Container (sm)
Max width: 640px
Medium Container (md)
Max width: 768px
Large Container (lg - default)
Max width: 1024px
Extra Large Container (xl)
Max width: 1280px
Full Width Container
No max width constraint
Section
Small Spacing Section
Padding: 1.5rem (24px)
Medium Spacing Section (default)
Padding: 3rem (48px)
Large Spacing Section
Padding: 4rem (64px)
Extra Large Spacing Section
Padding: 6rem (96px)
No Spacing Section
Custom padding applied via className
List
Simple List with Icons
List Item 1
This is a simple list item with an icon
List Item 2
Another list item with description
List Item 3
Third item in the list
Dense List
Compact item 1
Compact item 2
Compact item 3
Interactive List (Clickable)
List with Custom Typography
Bold Primary Text
Regular secondary text
List with Dividers
Item with divider
Separated by a line
Another item
Also has a divider
Last item
No divider below
Slider
Progress
Indeterminate
Determinate
Theme Colors
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Stepper
Horizontal Stepper
Vertical Stepper
Fullscreen Image Modal
Click the button below to view an image in fullscreen mode with zoom and pan capabilities.
Grid
Basic 12 Column Grid
xs=12
xs=6
xs=6
xs=4
xs=4
xs=4
Responsive Grid
Resize your browser to see the responsive behavior
xs=12 sm=6 md=4
xs=12 sm=6 md=4
xs=12 sm=6 md=4
Spacing Variants
Alignment & Justification
Centered
Aligned
Avatar
Breadcrumb
Collapsible
Toggle content visibility
Always visible content
Toggle Group
Single Selection
Multiple Selection
Outline Variant
Rating
Basic Rating
Sizes
Colors