shadcn.io is not affiliated with official shadcn/ui
Tabs examples · Standard
Tabs with Icons for React
Account, Billing, Notifications and Settings tabs with an icon before each label.
An icon beside each label makes tabs faster to scan once people know them. Each trigger has a Lucide icon and a word, and each panel repeats the icon in a tinted circle next to its heading. Use it for account and settings sections.
Preview
Installation
FAQ
Where do the icons sit in the triggers?
Before the word. The trigger draws an unsized icon at size-4 and spaces it from the label with its own gap.
What are the four tabs?
Account, Billing, Notifications and Settings, built from a sections array. Account is the default, and the group is w-full max-w-md.
Why is the icon repeated in the panel?
It ties the panel to its tab. The panel draws the same icon at size-5 in text-primary, inside a size-10 circle with bg-primary/10.
What names the trigger for a screen reader?
The visible word. The icons have aria-hidden="true", so the trigger is announced only by its label.
Related
- Basic TabsFour horizontal tabs that switch between
- Vertical TabsSettings tabs stacked in a column beside
- Full Width TabsThree tabs that split the full width of
- Accordion with Category IconsAn accordion of workspace sections, each
- Controlled TabsThree step tabs held in state, with
- Nested TabsProfile, Settings and Billing tabs, each