Fabrials UI

Loading state

420 requests in June.

A vertical rail: the current row has a Stormlight bar.

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@fabrials/ui";

API reference

Prop / export	Type	Description
`defaultValue`	`string`	The panel shown first.
`value`	`string`	Matches a trigger to its panel.
`Tabs orientation`	`horizontal \| vertical`	vertical makes a rail beside the panel: the list sits on the sidebar surface, the current row is the sidebar accent with a 2 px Stormlight bar on the inline-start edge, and the arrow keys move up and down.
`TabsList scrollable`	`boolean \| narrow`	One line that scrolls sideways instead of wrapping: no scrollbar, snap to the tabs, and the selected tab is kept in view (the list scrolls its own box, never the page; right to left works). true is always; narrow only below 48rem of viewport.
`TabsList variant`	`underline \| segmented`	underline by default.

Behavior

Each trigger names its panel. Do not use tabs for a step sequence. The indicator follows the active tab's own edge, so a list that wraps onto two rows still underlines the right one.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.