shadcn/ui Components
Accordion
Alert
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Button Group
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input
Input Group
Input OTP
Item
Kbd
Label
Menubar
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll-area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle
Toggle Group
Tooltip
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g d="M 5.999 36 C 9.311 36 11.999 33.312 11.999 30 L 11.999 23.999 L 5.999 23.999 C 2.688 23.999 0 26.687 0 30 C 0 33.312 2.688 36 5.999 36 Z M 0 18.004 C 0 14.691 2.688 12.003 5.999 12.003 L 11.999 12.003 L 11.999 24.004 L 5.999 24.004 C 2.688 24.004 0 21.316 0 18.004 Z M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z M 12.001 0 L 18.001 0 C 21.312 0 24 2.688 24 6 C 24 9.313 21.312 12.001 18.001 12.001 L 12.001 12.001 Z M 24 18.004 C 24 21.316 21.312 24.004 18.001 24.004 C 14.689 24.004 12.001 21.316 12.001 18.004 C 12.001 14.691 14.689 12.003 18.001 12.003 C 21.312 12.003 24 14.691 24 18.004 Z" fill="transparent" height="35.99999907424481px" id="gN7I927ny" transform="translate(6 0)" width="24.00000076323058px"><path d="M 5.999 12.001 C 9.311 12.001 11.999 9.313 11.999 6 L 11.999 0 L 5.999 0 C 2.688 0 0 2.688 0 6 C 0 9.313 2.688 12.001 5.999 12.001 Z" fill="rgb(10, 207, 131)" height="12.000800160670593px" id="LEQAgqym9" transform="translate(0 23.999)" width="11.998800087266225px"/><path d="M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z" fill="rgb(162, 89, 255)" height="12.000800160670593px" id="wHHomUG1Y" transform="translate(0 12.003)" width="11.998800087266225px"/><path d="M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z" fill="rgb(242, 78, 30)" height="12.000800160670577px" id="Wdbd_x23b" width="11.998800087266225px"/><path d="M 0 0 L 5.999 0 C 9.311 0 11.999 2.688 11.999 6 C 11.999 9.313 9.311 12.001 5.999 12.001 L 0 12.001 Z" fill="rgb(255, 114, 98)" height="12.000800160670577px" id="GtUh511Ro" transform="translate(12.001 0)" width="11.998800087266225px"/><path d="M 11.999 6 C 11.999 9.313 9.311 12.001 5.999 12.001 C 2.688 12.001 0 9.313 0 6 C 0 2.688 2.688 0 5.999 0 C 9.311 0 11.999 2.688 11.999 6 Z" fill="rgb(26, 188, 254)" height="12.000800160670593px" id="csflZBPLl" transform="translate(12.001 12.003)" width="11.998800087266225px"/></g></svg>)
shadcn/ui Tabs component
A Tabs component for Figma that displays layered sections of content, one at a time. This UI element is ideal for organizing a lot of information in a compact and clean way, such as on a profile or settings page.
Usability tip
Tabs should be used when all content is equally important. For less important content, consider a collapsible section.
Usage
Used to switch between different views of the same content, such as a profile page with "Settings," "Billing," and "Notifications" tabs.
One-time payment • Lifetime updates
One-time payment • Lifetime updates
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy