Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Basic Tabs
Basic horizontal tabs component with shadcn/ui Tabs TabsList and TabsTrigger for switching between Overview Analytics Reports sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tabs—the clearest way to organize related content into switchable views. This React tabs component uses shadcn/ui Tabs with TabsList containing TabsTrigger buttons and TabsContent for each section. Built with Radix UI primitives providing proper ARIA attributes and keyboard navigation, basic tabs let users switch between related content without page reload—perfect for dashboards, settings panels, data views, profile sections, or any interface where multiple related views share the same space and users need instant switching without navigation.
Overview
View a comprehensive summary of your account activity, recent updates, and key metrics at a glance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Tabs with Icons
Tabs with Lucide React icons
Vertical Tabs
Sidebar-style vertical layout
Full Width Tabs
Grid layout equal width tabs
Scrollable Tabs
Horizontal scrolling for many tabs
Accordion
Alternative collapsible sections
Card
Content container styling
Questions you might have
React Scrollable Tabs
Scrollable tabs with ScrollArea wrapping TabsList for horizontal scrolling through many tab options with whitespace-nowrap built with shadcn/ui
React Tabs with Icons
Tabs component with Lucide React icons paired with text labels in TabsTrigger for visual category identification and improved scannability