Shadcn Tabs

You know how some interfaces have so much content that showing everything at once would be overwhelming? Ever tried organizing a complex settings screen or dashboard without losing users in endless scrolling? That's exactly where tabs shine—they let users focus on one section while keeping other options visible and accessible, like file tabs in your code editor or browser tabs you probably have too many of right now. This shadcn/ui tabs component makes content organization feel natural in your React applications.

Tabs showcase

Simple content navigation with clean design:

"use client"import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/components/ui/tabs"const tabs = [  {    name: 'Explore',    value: 'explore',    content: (      <>        Discover <span className='text-foreground font-semibold'>fresh ideas</span>, trending topics, and hidden gems        curated just for you. Start exploring and let your curiosity lead the way!      </>    )  },  {    name: 'Favorites',    value: 'favorites',    content: (      <>        All your <span className='text-foreground font-semibold'>favorites</span> are saved here. Revisit articles,        collections, and moments you love, any time you want a little inspiration.      </>    )  },  {    name: 'Surprise Me',    value: 'surprise',    content: (      <>        <span className='text-foreground font-semibold'>Surprise!</span> Here&apos;s something unexpected—a fun fact, a        quirky tip, or a daily challenge. Come back for a new surprise every day!      </>    )  }]export default function TabsDemo() {  return (    <div className='w-full max-w-md p-6'>      <Tabs defaultValue='explore'>        <TabsList>          {tabs.map(tab => (            <TabsTrigger key={tab.value} value={tab.value}>              {tab.name}            </TabsTrigger>          ))}        </TabsList>        {tabs.map(tab => (          <TabsContent key={tab.value} value={tab.value} className="mt-6">            <div className="min-h-[100px] flex items-start">              <p className='text-muted-foreground text-sm'>{tab.content}</p>            </div>          </TabsContent>        ))}      </Tabs>    </div>  )}

"use client"import * as React from "react"import * as TabsPrimitive from "@radix-ui/react-tabs"import { cn } from "@/lib/utils"function Tabs({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Root>) {  return (    <TabsPrimitive.Root      data-slot="tabs"      className={cn("flex flex-col gap-2", className)}      {...props}    />  )}function TabsList({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.List>) {  return (    <TabsPrimitive.List      data-slot="tabs-list"      className={cn(        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",        className      )}      {...props}    />  )}function TabsTrigger({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {  return (    <TabsPrimitive.Trigger      data-slot="tabs-trigger"      className={cn(        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",        className      )}      {...props}    />  )}function TabsContent({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Content>) {  return (    <TabsPrimitive.Content      data-slot="tabs-content"      className={cn("flex-1 outline-none", className)}      {...props}    />  )}export { Tabs, TabsList, TabsTrigger, TabsContent }

Basic horizontal tabs with clean content sections. This free open source React component handles all the keyboard navigation and ARIA attributes so screen readers understand the tab structure perfectly. Built with TypeScript for full type safety while styled with Tailwind CSS to match your design system.

npx shadcn@latest add tabs

Why tabs improve user experience

Tabs solve real interface problems:

• Reduced cognitive load - Users see one focused section at a time
• Clear navigation - All options visible without scrolling
• Contextual grouping - Related content stays together
• Space efficiency - Multiple panels in the same area
• State preservation - Content persists when switching tabs
• Familiar pattern - Users already know how tabs work

Common tab patterns you'll actually build

Icon-only vertical tabs

Space-efficient sidebar with tooltips for navigation:

"use client"import { BookIcon, GiftIcon, HeartIcon } from "lucide-react"import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/components/ui/tabs"import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"const tabs = [  {    name: 'Explore',    value: 'explore',    icon: BookIcon,    content: (      <>        Discover <span className='text-foreground font-semibold'>fresh ideas</span>, trending topics, and hidden gems        curated just for you. Start exploring and let your curiosity lead the way!      </>    )  },  {    name: 'Favorites',    value: 'favorites',    icon: HeartIcon,    content: (      <>        All your <span className='text-foreground font-semibold'>favorites</span> are saved here. Revisit articles,        collections, and moments you love, any time you want a little inspiration.      </>    )  },  {    name: 'Surprise Me',    value: 'surprise',    icon: GiftIcon,    content: (      <>        <span className='text-foreground font-semibold'>Surprise!</span> Here&apos;s something unexpected—a fun fact, a        quirky tip, or a daily challenge. Come back for a new surprise every day!      </>    )  }]export default function TabsVertical() {  return (    <div className='w-full max-w-md p-6'>      <TooltipProvider>        <Tabs defaultValue='explore' className='flex-row gap-4'>          <TabsList className='h-full flex-col gap-2'>            {tabs.map(({ icon: Icon, name, value }) => (              <Tooltip key={value}>                <TooltipTrigger asChild>                  <span>                    <TabsTrigger                      value={value}                      className='flex w-full flex-col items-center gap-1'                      aria-label='tab-trigger'                    >                      <Icon />                    </TabsTrigger>                  </span>                </TooltipTrigger>                <TooltipContent className='px-2 py-1 text-xs' side='left'>                  {name}                </TooltipContent>              </Tooltip>            ))}          </TabsList>          {tabs.map(tab => (            <TabsContent key={tab.value} value={tab.value} className="ml-6">              <div className="min-h-[100px] flex items-start">                <p className='text-muted-foreground text-sm'>{tab.content}</p>              </div>            </TabsContent>          ))}        </Tabs>      </TooltipProvider>    </div>  )}

"use client"import * as React from "react"import * as TabsPrimitive from "@radix-ui/react-tabs"import { cn } from "@/lib/utils"function Tabs({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Root>) {  return (    <TabsPrimitive.Root      data-slot="tabs"      className={cn("flex flex-col gap-2", className)}      {...props}    />  )}function TabsList({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.List>) {  return (    <TabsPrimitive.List      data-slot="tabs-list"      className={cn(        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",        className      )}      {...props}    />  )}function TabsTrigger({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {  return (    <TabsPrimitive.Trigger      data-slot="tabs-trigger"      className={cn(        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",        className      )}      {...props}    />  )}function TabsContent({  className,  ...props}: React.ComponentProps<typeof TabsPrimitive.Content>) {  return (    <TabsPrimitive.Content      data-slot="tabs-content"      className={cn("flex-1 outline-none", className)}      {...props}    />  )}export { Tabs, TabsList, TabsTrigger, TabsContent }

These examples demonstrate two distinct tab patterns: the main horizontal demo for standard navigation and vertical layouts for space-constrained interfaces. Each shows how this open source component adapts to different interface needs while maintaining consistent interaction patterns.

Features

This free open source tabs component includes everything you need:

• TypeScript-first - Full type safety with tab values and state management in React
• Radix UI powered - Built on battle-tested primitives with ARIA compliance
• Keyboard navigation - Arrow keys, Home, End, Tab - everything works naturally
• Tailwind CSS styled - Customize with utilities, not fighting tab-specific CSS
• Orientation flexible - Horizontal headers or vertical sidebar layouts
• State management - Controlled and uncontrolled modes for any use case
• Screen reader ready - Proper roles, states, and focus management
• Content preservation - Tab panels stay mounted to preserve form state

API Reference

Component Props

Keyboard Shortcuts

Styling Hooks

Production tips

Keep tab labels short and descriptive for better mobile experience. This free shadcn/ui tabs component handles the interaction—you provide clear labels that work on any screen size. "Account" beats "Account Settings" when space is tight. "Billing" beats "Billing Information" for tab navigation.

Preserve form state when users switch between tabs. Nothing frustrates users more than losing their input when exploring other tabs. This TypeScript component keeps tab content mounted by default—take advantage of this for forms and complex interfaces in your Next.js applications.

Consider URL state for shareable tab views. If users might want to link directly to a specific tab, sync the active tab with your router. This open source shadcn tabs component provides controlled state—connect it to your JavaScript routing for deep linking support.

Test horizontal scrolling on mobile for many tabs. When you have more tabs than fit on screen, ensure users can scroll horizontally or provide tab overflow patterns. The Tailwind CSS styled component handles the basics—you design the mobile strategy that works for your content.

Use consistent content heights to avoid jarring layout shifts. When tab panels have very different heights, switching feels jumpy. This React component maintains focus—you ensure content feels stable. Consider min-height constraints or skeleton loading for dynamic content.

Integration with other components

Tabs naturally pair with Card components for clean panel containers in your React applications. Use Form components inside tab panels for settings and configuration screens. Badge components work great for notification counts on tab triggers.

For complex layouts, combine tabs with Accordion components inside panels for nested organization. This open source pattern provides multiple levels of content hierarchy without overwhelming users.

When building dashboards, use tabs with Button components for actions and Select components for filters within each panel. Separator components help organize dense tab content visually.

For navigation, tabs work alongside Navigation Menu components for different levels of site hierarchy. Your JavaScript application can compose these shadcn components for complete navigation systems while maintaining consistent interaction patterns.

Questions you might have