Design System Showcase
Components
53 UI components organized by category. Click interactive components to see their behavior.
Actions
Buttons, toggles, and interactive controls for user actions.
Button Variants
Button Sizes
Button with Icons
Button Group
Toggle
Toggle Group
Single Selection
Multiple Selection
Forms
Input controls for collecting user data.
Input
Textarea
Label + Input
Select
Checkbox
Radio Group
Switch
Slider
Value: 50
Feedback
Components for displaying status, progress, and loading states.
Alert
Default Alert
This is a default alert message.
Error
Something went wrong. Please try again.
Success
Your changes have been saved.
Warning
This action cannot be undone.
Progress
Skeleton
Spinner
Overlay
Modal dialogs, sheets, popovers, and floating elements.
Dialog
Alert Dialog
Sheet
Popover
Tooltip
Hover Card
Dropdown Menu
Context Menu
Right click here
Command Palette
No results found.
Calendar
Search
Settings
Data Display
Components for presenting data and content.
Table
| Name | Status | Amount | |
|---|---|---|---|
| John Doe | john@example.com | Active | $250.00 |
| Jane Smith | jane@example.com | Pending | $150.00 |
| Bob Wilson | bob@example.com | Inactive | $350.00 |
Card
Card Title
Card description goes here.
Card content with some text.
Interactive Card
Hover for lift effect.
This card lifts on hover.
Badge
DefaultSecondaryDestructiveOutlineSuccessWarning
Avatar
CNJDAB
Separator
Section Title
Some content here.
Another Section
More content below the separator.
Keyboard Shortcut (Kbd)
Ctrl+CCopy
Ctrl+VPaste
Ctrl+SSave
Layout
Components for organizing and containing content.
Scroll Area
Aspect Ratio
16:9
4:3
1:1
Collapsible
@peduarte starred 3 repositories
@radix-ui/primitives