Components

Tabs

The ported BaseTab: a strip of text tabs with no underline and no pill — the active tab is simply brighter, ink against ink-tertiary. Distinct from the Segmented Filter, whose plate marks a filter in force; tabs switch what you are looking at.

Usage

Controlled by index: items is the label list, value the active position. The strip scrolls horizontally when it overflows, and the active state doubles as aria-current.

import { BaseTab } from "@/components/base/base-tab";

<BaseTab items={["Popular", "Newest", "Following"]} value={tab} onChange={setTab} />

Direction

direction switches between the horizontal strip and the vertical rail the chat screen puts down its left edge. spacing is the gap between tabs — legacy passes a wider 1.25rem on the AI surface, so it is a prop rather than a constant.