shadcn/ui Component Gallery
shadcn/ui Component Gallery
This gallery showcases our implementation of shadcn/ui components, demonstrating their integration with our token system.
Note
Components listed here appear in alphabetical order.
For those marked “TBD,” we plan to add code examples once the component has been implemented.
Accordion
Features
- Follows WAI-ARIA design pattern
- Keyboard navigation support
- Smooth animations
- Theme-aware styling
- Single or multiple expansion modes
Alert
Default Alert
Heads up!
This is a default alert - check it out!
Alert Variants
Error
Your session has expired. Please log in again.
Success
Your changes have been saved successfully.
Simple Alerts
With Icons
Tips
Alert with icon - notice the automatic positioning and spacing.
Error
Critical error with warning icon.
ARIA Roles
Default role=“alert”
For important, time-sensitive information.
Using role=“status”
For status updates that aren’t time-critical.
Alert Dialog
Features
- Modal dialog for critical actions
- Keyboard navigation support (Escape to close)
- Focus management
- ARIA roles for accessibility
- Animated transitions
- Responsive layout
Aspect Ratio
Square (1:1)
Landscape (16:9)
Features
- Maintains consistent width-to-height ratio
- Supports any ratio value (16:9, 4:3, 1:1, etc.)
- Perfect for responsive images and videos
- Prevents layout shift during loading
- Seamless integration with other components
Avatar
Features
- Displays user avatars with fallback support
- Supports custom images and placeholder text
- Responsive sizing through Tailwind classes
- Customizable colors and styles
- Graceful loading with fallback states
- Accessible image alternatives
Use Cases
- User profile pictures
- Team member displays
- Comment avatars
- Account settings
- Contact lists
Badge
Default Variants
Interactive States
Use Cases
With Icons
Verified
Add New
Breadcrumb
Features
- Follows WAI-ARIA breadcrumb pattern
- Keyboard navigation support
- Responsive design
- Customizable separators
- Support for truncation with ellipsis
- Semantic HTML structure
Use Cases
- Website navigation
- Multi-step forms
- Document hierarchies
- File system navigation
- Category browsing
Button
Default Variants
Sizes
Calendar
TBD: Insert final implementation here.
Card
Default Card
This is a default card with standard styling.
Interactive Card
This card has hover and active states. Try clicking it!
Subtle Card
This card has a subtle background using our new opacity tokens.
Nested Content Example
Card with Rich Content
This card demonstrates how well it works with other components and typography.
Carousel
TBD: Insert final implementation here.
Chart
TBD: Insert final implementation here.
Checkbox
TBD: Insert final implementation here.
Collapsible
TBD: Insert final implementation here.
Combobox
TBD: Insert final implementation here.
Command
TBD: Insert final implementation here.
Context Menu
TBD: Insert final implementation here.
Data Table
TBD: Insert final implementation here.
Date Picker
TBD: Insert final implementation here.
Dialog
TBD: Insert final implementation here.
Drawer
TBD: Insert final implementation here.
Dropdown Menu
TBD: Insert final implementation here.
Form
TBD: Insert final implementation here.
Hover Card
TBD: Insert final implementation here.
Input
Default Variants
Sizes
States
Input OTP
TBD: Insert final implementation here.
Label
TBD: Insert final implementation here.
Menubar
TBD: Insert final implementation here.
Navigation Menu
Basic Navigation
A simple dropdown menu with a single item.
Component Grid
A grid of components with descriptions.
List with Featured Item
A list with a featured item and styled links.
Simple Link
A single navigation link using the menu trigger style.
Pagination
TBD: Insert final implementation here.
Popover
TBD: Insert final implementation here.
Progress
TBD: Insert final implementation here.
Radio Group
TBD: Insert final implementation here.
Resizable
TBD: Insert final implementation here.
Scroll Area
TBD: Insert final implementation here.
Select
TBD: Insert final implementation here.
Separator
TBD: Insert final implementation here.
Sheet
TBD: Insert final implementation here.
Sidebar
TBD: Insert final implementation here.
Skeleton
TBD: Insert final implementation here.
Slider
TBD: Insert final implementation here.
Sonner
TBD: Insert final implementation here.
Switch
TBD: Insert final implementation here.
Table
TBD: Insert final implementation here.
Tabs
TBD: Insert final implementation here.
Textarea
TBD: Insert final implementation here.
Toast
TBD: Insert final implementation here.
Toggle
TBD: Insert final implementation here.
Toggle Group
TBD: Insert final implementation here.
Tooltip
*TBD: Insert final implementation here.