InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/page-tabs

UsageCopy Anchor Link

import { PageTabs } from "@/components/page-tabs";
import { TabsContent } from "@/components/ui/tabs";

<PageTabs
  label="Settings sections"
  onValueChange={setTab}
  tabs={[
    { id: "general", label: "General" },
    { id: "recording", label: "Recording" },
  ]}
  value={tab}
>
  <TabsContent value="general">…</TabsContent>
  <TabsContent value="recording">…</TabsContent>
</PageTabs>

Use it for a page whose parts each answer one question: Settings, Livestream, Buddy. A tab's body is a ConfigGrid of two sections with CONFIG_GRID_PAIR, or a PageStack for one.

PageTabs keeps no state. Keep the tab in the app: remember the last one used on this device, open a named tab from a link, and list every tab in the command palette.

Don't put tabs in the toolbar, which holds only the title. Don't use tabs to choose a value either: that's a Segmented Control.

AnatomyCopy Anchor Link

PageTabs draws the strip and the tab list from tabs; you pass the panels.

<PageTabs>
  <PaneStrip>
    <TabsList>
      <TabsTrigger />
    </TabsList>
  </PaneStrip>
  <div data-slot="page-tabs-scroll">
    <TabsContent />
  </div>
</PageTabs>

The root is a Tabs carrying PANE_OWNS_SCROLL, so the PaneBody around it stops scrolling, and the region under the strip is keyed by the tab.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

label names the tab list ("Settings sections"); Base UI wires the tabs to their panels. The scroll region is keyed by the tab, so every change, by a click, the arrow keys or a link, starts the new tab at the top while focus stays on the tab list.

API referenceCopy Anchor Link