Tabs

A set of layered panels, one visible at a time, with an active-tab indicator that slides to match the current selection using a spring animation. Built on Base UI's tabs primitive, so focus management, keyboard navigation, and ARIA wiring come for free.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content</TabsContent>
      <TabsContent value="activity">Activity content</TabsContent>
    </Tabs>
  )
}

Examples

Variants

Pass variant to Tabs to switch the tab list's visual style.

With icons

Disabled tab

Controlled

Vertical

Scrollable

When the tab list overflows, edges fade to hint at more content and sharpen once you've scrolled all the way — direction aware, so it mirrors correctly in RTL.

API Reference