Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Tabs with Icons
Tabs component with Lucide React icons paired with text labels in TabsTrigger for visual category identification and improved scannability
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text-only tabs blend together—icons provide visual anchors. This React tabs component combines shadcn/ui Tabs with Lucide React icons User CreditCard Bell Settings alongside text labels. Built with icons rendering before text in each TabsTrigger and matching icons in TabsContent headers, icon-enhanced tabs create memorable visual associations—perfect for settings sections, account management, dashboard navigation, app configuration, or any interface where distinct visual icons help users quickly locate and remember which tab contains what without reading every label.
Account
Manage your account settings
Update your personal information, change your password, and manage your account preferences.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Tabs
Standard tabs without icons
Vertical Tabs
Sidebar-style vertical layout
Full Width Tabs
Grid layout equal width tabs
Icon Button
Button with icon only
Accordion with Icons
Icons in accordion headers
Sidebar with Icons
Icon-based navigation