Tabs

InstallationCopy Anchor Link

npx shadcn@latest add @docscn/docs-tabs

UsageCopy Anchor Link

The docs block adds Tabs and Tab to your MDX components. Otherwise, add them to components/mdx.tsx or import them in a page:

import { Tab, Tabs } from "@/components/docs/components/tabs";

<Tabs items={["pnpm", "npm", "yarn"]}>
  <Tab>Install with `pnpm add next-themes`.</Tab>
  <Tab>Install with `npm install next-themes`.</Tab>
  <Tab>Install with `yarn add next-themes`.</Tab>
</Tabs>

With items, each Tab matches an item by its order. Pass value to match a tab explicitly instead, or leave out items and compose the list yourself with TabsList and TabsTrigger:

<Tabs defaultValue="react">
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue</TabsTrigger>
  </TabsList>
  <TabsContent value="react">...</TabsContent>
  <TabsContent value="vue">...</TabsContent>
</Tabs>

Shared and persisted selectionsCopy Anchor Link

Tabs with the same groupId stay in sync: picking "npm" in one switches every tab group on the site with that groupId. The selection is kept for the session, and persist keeps it across visits.

<Tabs groupId="package-manager" persist items={["pnpm", "npm", "yarn"]}>

Linking to a tabCopy Anchor Link

Give a Tab an id, and a link to #id opens that tab. A link to an element inside a tab opens the tab too. With updateAnchor, selecting a tab updates the URL hash to its id.

PropsCopy Anchor Link

Tabs is built on shadcn/ui tabs, and also accepts its props, such as defaultValue, value and onValueChange.