Navigation & layoutBrick 0.1.2

Tabs

Tabs switches between related peer panels while preserving complete keyboard, selection, and panel relationships through Atom.

Live example

Built from the published package

Interactive

Overview panel

Choose with confidence

Know when Tabs is the right part

Use it when

Use Tabs for a small set of peer views that share one context and can be loaded without changing the page's primary location.

Choose another path when

Do not use Tabs for site navigation, sequential steps, independent form choices, or content whose activation is actually a route transition.

Installation and imports

tsx

import { Tabs } from "@flowstack-ui/brick/tabs";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/tabs.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Tabs.Root defaultValue="overview">
  <Tabs.List ariaLabel="Account sections">
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content value="overview">Overview panel</Tabs.Content>
  <Tabs.Content value="activity">Activity panel</Tabs.Content>
</Tabs.Root>

Visual recipes and states

Line emphasizes selection with a server-rendered selected edge and an optional moving Indicator after Atom can measure the active Trigger. The Indicator is a line-only visual enhancement: solid, soft, and enclosed hide it and render their complete selected treatment directly on the active Trigger. This keeps every recipe visually stable on the first paint and through hydration. Sizes change control typography and rhythm. Hover, active, selected, disabled, and focus-visible remain distinct.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, TabsIndicator, TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsIndicatorProps, TabsSize, and TabsVariant.

Prop	Values	Default
`size`	`sm`, `md`, `lg`	`md`
`variant`	`line`, `solid`, `soft`, `enclosed`	`line`
`fullWidth`	`boolean`	`false`

List, Trigger, Content, and Indicator extend their exact Atom props. Atom also supplies orientation, activationMode, loop, controlled/uncontrolled value, keepMounted, and focusable.

Shared responsibility

Accessibility

Give every List a useful label, pair each Trigger value with one Content value, and choose an initial value. Automatic activation is the default; choose manual when activating a panel is costly. Disabled tabs are skipped. Forced colors and reduced motion retain selection and focus.

Responsive behavior

Horizontal lists stay on one line and scroll when constrained. Vertical layout stays vertical because orientation changes keyboard and ARIA behavior; choose a responsive orientation in application state rather than CSS alone.

Stable visual contract

Styling and tokens

Customization

Set supported variables on Root. Use className or style for local layout; do not replace selected/focus affordances or rewrite Atom state attributes. Use Tabs.Indicator only when a line recipe benefits from the moving accent; the selected state remains visible without it.

Tokens and CSS hooks

Stable classes are .brick-tabs, .brick-tabs-list, .brick-tabs-trigger, .brick-tabs-content, and .brick-tabs-indicator. Root exposes data-size, data-variant, data-full-width, and Atom's data-orientation. Public tokens include --brick-tabs-foreground, --brick-tabs-selected-foreground, --brick-tabs-hover-background, --brick-tabs-list-background, --brick-tabs-selected-background, --brick-tabs-border-color, --brick-tabs-indicator-color, --brick-tabs-focus-ring, --brick-tabs-gap, --brick-tabs-trigger-gap, --brick-tabs-trigger-height, --brick-tabs-trigger-padding, --brick-tabs-panel-padding, and --brick-tabs-radius.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground