Tabs

Tabs. Free, MIT · Navigation and layout › Switching

Installation

npx valyro-cli@latest add tabs

npx shadcn@latest add https://valyro.xyz/r/tabs.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Tabs } from 'valyro-ui';

Prop	Type	Default
`items`	`TabItem[]`		Tabs in order, each with optional panel content. Or compose them as children: `Tabs.List`, `Tabs.Tab`, `Tabs.Panel`.
`children`	`ReactNode`		The compound form instead of `items`: a `Tabs.List` of `Tabs.Tab`s, then a `Tabs.Panel` per tab that has content.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`variant`	`'underline' \| 'pills'`	`'underline'`	`underline`: a bar slides along the baseline; `pills`: a filled shape slides behind the active tab.
`label`	`string`		Accessible name of the tab list.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the indicator springs between tabs, the new panel slides in from the side of the tab it came from and the panel area eases to the new height. `default`: the theme's indicator, instant panels.
`keyboardActivation`	`'automatic' \| 'manual'`	`'automatic'`	`automatic` (default): moving focus with the arrow keys selects the tab. `manual`: the arrows only move focus and Enter or Space selects, for panels that are slow to render or load (WAI-ARIA APG, React Aria).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`vertical`: the tabs stack in a column beside the panel and move with ArrowUp / ArrowDown.

Tabs.List (TabsList), Tabs.Tab (TabsTab), Tabs.Panel (TabsPanel)

Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode