4AF Components

Navigation and layout

Tabs

A Base UI tab set with keyboard navigation and an animated active indicator.

View as Markdown
⠋

Install

npx shadcn@latest add https://4af.selfsimilar.dev/r/tabs.json

Usage

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
  </TabsList>
</Tabs>

<Tabs variant="pill" size="sm" defaultValue="account">
  <TabsList maxWidth={280}>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="notifications">Notifications</TabsTab>
    <TabsTab value="billing">Billing</TabsTab>
    <TabsTab value="team">Team members</TabsTab>
    <TabsTab value="security">Security</TabsTab>
  </TabsList>
</Tabs>

API

Main exports: Tabs, TabsList, TabsTab, TabsCount, TabsPanel

Base UI tabs with a travelling Motion indicator; segment, pill, and underline variants; an appearance for segment and pill; and two sizes.

appearanceTrack and selected chip
defaultMuted track; raised surface chip with a hairline.
solidborder track with a borderless background chip.
outlineBordered, unfilled track; bg-muted fill under the selected tab. Same heights as default.

underline ignores appearance. The solid boolean is deprecated: solid maps to appearance="solid", and an explicit appearance wins over it.

VariantOutlined geometry
segmentFill inset 3px from the border. 34px (md) / 30px (sm) tracks, the Input and Select heights; 8px corners around 4px fills (md), 7px around 3px (sm).
pillSame padding as the filled pill; the tabs give up 1px of vertical padding to the border. Fully rounded.

TabsCount renders a dim, tabular count after a tab's label, in any variant:

<TabsTab value="included">
  Included <TabsCount>3</TabsCount>
</TabsTab>

size is md by default. sm uses a smaller type step and tighter padding, with a 32px pill track. Segment corners step down with it, from an 8px track around 6px tabs to a 7px track around 5px tabs. Pill tabs are fully rounded, and underline tabs round only their top corners.

Scrolling and edge fades

Set maxWidth on TabsList to enable a horizontally scrolling bar in any variant. Use a number for pixels (maxWidth={280}) or a CSS length (maxWidth="20rem"). The bar never grows past its parent's width, so give it a parent with a definite width.

An edge fades with a tapered blur while more tabs are hidden on that side, including the track and the underline variant's rule. Touch and trackpad scrolling work natively, with the scrollbar hidden. Clicking a tab in the half of the bar with more hidden content scrolls it toward the centre. Keyboard focus, the initial selection, and controlled selection changes also bring hidden tabs into view. Under reduced motion the scrolling is instant. Focus rings sit inside the tabs so they aren't clipped. Scrolling applies to horizontal tab lists only.

On this page