Tabs

Base UI

Condensed uppercase labels with a heavy accent bar that slides between tabs.

Each component is one file. Copy it in, own it, edit the tokens.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/tabs.json

Also installs @base-ui/react.

Usage

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/spotcheck/tabs"

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="tokens">Tokens</TabsTab>
  </TabsList>
  <TabsPanel value="overview">…</TabsPanel>
  <TabsPanel value="tokens">…</TabsPanel>
</Tabs>

Props

classNamestringDefault —

Keyboard

← →	Move between tabs
Home	Jump to the first tab
End	Jump to the last tab

Reduced motion

The bar jumps to the active tab.