Folder Style Tabs

Two overlapping tabs. The selected tab is transparent so it shares the surface behind it. The other tab sits recessed on the card fill. recess is how far that idle tab steps back, from 0 (flush) to 1 (narrow, faded, deep meet-corner bite). 0.5 is the default. Turn it up when a tab-band wash is too close to the card to read the step.

appearance picks how color is used:

• Shell — the wash covers the card, so it shows through the selected tab and continues into the body.
• Plain — no wash. A bordered card only.
• Tab band — the same color fades out at the bottom of the tabs. The body stays on the card fill.

Usage

import { FolderStyleTabs } from "@sophic/portal-ui";

<FolderStyleTabs
  aria-label="Buy or sell"
  appearance="tabs"
  color="var(--color-success-100)"
  tabs={[
    { value: "buy", label: "Buy" },
    { value: "sell", label: "Sell" },
  ]}
  value={side}
  onValueChange={setSide}
>
  {children}
</FolderStyleTabs>;

tabs is always a pair. color is required for shell and tabs, and ignored for plain. size is sm (default) or md. recess is 0–1 (default 0.35), or false to keep the folder fade and corner at an even half-width split so switching does not push the bar. rim (default on) is the specular edge on a washed card, and the hairline on a plain one. shadow is 0–1 (default 0). It insets the idle tab along the bottom and the inner edge only.

Props

Changelog

• 30 September 2026 — Added. Shell wash, plain card, or a color that stops at the tab band. Full notes