Tabs · Tinyrack Design System

Contract

Axis	Values	Default
`uiSize`	`md`, `lg`	`md`
`orientation`	`horizontal`, `vertical`	`horizontal`
disabled tab	`TRTabs.Tab disabled`	`false`
activation	manual or `activateOnFocus`	manual
focus	looping or bounded	looping
state	controlled `value`, including `null`, or uncontrolled `defaultValue`	first enabled tab

Install

pnpm add @tinyrack/ui

Scroll inside the code area to read long lines.

Styles

@import '@tinyrack/ui/components/tabs.css';

Scroll inside the code area to read long lines.

Imports

import { TRTabs } from '@tinyrack/ui/components/tabs';

Scroll inside the code area to read long lines.

Playground

All systems operational.

Usage

Controlled manual activation permalink

Arrow keys move focus. Enter or Space selects the focused tab and updates the result.

All systems operational.

Selected: overview

Examples

Size and activation comparison permalink

Arrow focus also selects.

Focus stops at each end.

Vertical, disabled, and persistent content permalink

All systems operational.

Overflow with an indicator permalink

The narrow tab strip scrolls horizontally while the optional indicator follows the active tab.

Scroll the tab strip for more sections.

Overview panel

Anatomy

Root owns controlled or uncontrolled selection, orientation, and uiSize.
List is the labelled tablist and configures activation and focus looping.
Tab identifies a view by value; disabled tabs remain focusable but cannot activate.
Indicator is optional and follows the active tab, including in an overflow strip.
Panel connects accessible content to the tab with the same value.

API

Part	Key props	Notes
`Root`	`value`, `defaultValue`, `onValueChange`, `orientation`, `uiSize`	Use `value={null}` for no active tab. Without a value prop, the first enabled tab is selected.
`List`	`activateOnFocus`, `loopFocus`	Manual activation and looping focus are the defaults.
`Tab`	`value`, `disabled`, `render`	Arrow keys move focus; Enter or Space activates in manual mode.
`Indicator`	`renderBeforeHydration`, `render`	Optional visual marker driven by Base UI geometry variables.
`Panel`	`value`, `keepMounted`, `hiddenUntilFound`, `render`	Matches a tab value and preserves ARIA relationships.

Base UI supplies roles, focus movement, selection, and hydration-safe state. Import tabs.css after your Tinyrack foundation styles. Customize with --tr-tabs-indicator-background, --tr-tabs-indicator-size, --tr-tabs-radius, --tr-tabs-tab-height, and --tr-tabs-panel-padding.