Tabs

A tabs for switching between views, with a plain tab bar variant.

@cupertinoui/tabsBase UI Tabs Registry JSON

Startup, default browser and language.

"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDemo() {
  return (
    <Tabs defaultValue="general" className="w-full max-w-sm items-center">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="appearance">Appearance</TabsTrigger>
        <TabsTrigger value="advanced">Advanced</TabsTrigger>
      </TabsList>
      <TabsContent value="general" className="text-center text-mac-label-secondary">
        Startup, default browser and language.
      </TabsContent>
      <TabsContent value="appearance" className="text-center text-mac-label-secondary">
        Light or dark, accent color and sidebar icon size.
      </TabsContent>
      <TabsContent value="advanced" className="text-center text-mac-label-secondary">
        File extensions, search scope and Trash.
      </TabsContent>
    </Tabs>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/tabs

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="advanced">Advanced</TabsTrigger>
  </TabsList>
  <TabsContent value="general">…</TabsContent>
  <TabsContent value="advanced">…</TabsContent>
</Tabs>

Examples

With symbols

"use client"

import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsIcons() {
  return (
    <Tabs defaultValue="left">
      <TabsList>
        <TabsTrigger value="left" aria-label="Align left">
          <AlignLeftIcon />
        </TabsTrigger>
        <TabsTrigger value="center" aria-label="Align center">
          <AlignCenterIcon />
        </TabsTrigger>
        <TabsTrigger value="right" aria-label="Align right">
          <AlignRightIcon />
        </TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Tab bar

variant="line" renders a plain tab bar with an accent underline.

128 messages

"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsLine() {
  return (
    <Tabs defaultValue="all" className="w-full max-w-sm">
      <TabsList variant="line">
        <TabsTrigger value="all">All</TabsTrigger>
        <TabsTrigger value="unread">Unread</TabsTrigger>
        <TabsTrigger value="flagged">Flagged</TabsTrigger>
      </TabsList>
      <TabsContent value="all" className="text-mac-label-secondary">128 messages</TabsContent>
      <TabsContent value="unread" className="text-mac-label-secondary">4 unread messages</TabsContent>
      <TabsContent value="flagged" className="text-mac-label-secondary">No flagged messages</TabsContent>
    </Tabs>
  )
}

API Reference

Every part forwards the props of the underlying Base UI Tabs part. The props below are the ones CupertinoUI adds or changes.

Tabs

Prop	Type	Description
`value / defaultValue`	`string`	The selected segment.
`onValueChange`	`(value: string) => void`	Called when the selection changes.
`orientation`	`"horizontal" \| "vertical"` Default: `"horizontal"`	Lay the segments out in a row or a column.

TabsList

Prop	Type	Description
`variant`	`"default" \| "line"` Default: `"default"`	Tabs or tab bar.
`className`	`string`	Extra classes, merged with the component's own.

TabsTrigger

Prop	Type	Description
`value`	`string`	The value of this segment.
`className`	`string`	Extra classes, merged with the component's own.