These examples are taken from shadcn official repo on Github (https://github.com/shadcn-ui/ui)
Chart
Area Chart
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Bar Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Mixed
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Accordion
Alert
Success! Your changes have been saved
This is an alert with icon, title and description.
This one has an icon and a description only. No title.
This one has a description only. No title. No icon.
Let's try one with icon and title.
This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines
This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines
This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior
This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.
Something went wrong!
Your session has expired. Please log in again.
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
The selected emails have been marked as spam.
Plot Twist: This Alert is Actually Amber!
This one has custom colors for light and dark mode.
Alert Dialog
Aspect Ratio
Avatar
CNCNCNER
CNLRER
CNLRER
CNLRER
Calendar
March 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
January 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
February 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
January 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
February 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
March 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Card
Meeting Notes
Transcript from the meeting with the client.
Client requested dashboard redesign with focus on mobile responsiveness.
- New analytics widgets for daily/weekly metrics
- Simplified navigation menu
- Dark mode support
- Timeline: 6 weeks
- Follow-up meeting scheduled for next Tuesday
CNLRER
Is this an image?
This is a card with an image.
4 2 350m²
$135,000
Content Only
Header Only
This is a card with a header and a description.
Header and Content
This is a card with a header and a content.
Content
Footer Only
Header + Footer
This is a card with a header and a footer.
Footer
Content
Footer
Header + Footer
This is a card with a header and a footer.
Content
Footer
Checkbox
By clicking this checkbox, you agree to the terms and conditions.
Collapsible
@peduarte starred 3 repositories
@radix-ui/primitives
Combobox
Command
Press ⌘J
Command Palette
Search for a command to run...
Date Picker
Dialog
Drawer
Form
Hover Card
Input
Input Otp
1
2
3
4
5
6
Label
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Tailwind CSS
A utility-first CSS framework.
Blog
Docs
Source
Sheet
Skeleton
Slider
0.3, 0.7
Sonner
Switch
Table
| 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 | ||
Tabs
Account
Make changes to your account here. Click save when you're done.
Textarea
Type your message and press enter to send.
Toggle
Toggle Group
Tooltip