Tabs

Switch between related views without leaving the page.

$ pnpm dlx shadcn@latest add https://dashral.com/r/tabs.json

A summary of your store's performance.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/tabs.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/tabs

Usage

example.tsx

1import { Tabs } from "@/components/dashral/tabs"
2
3<Tabs
4  items={[
5    { value: "overview", label: "Overview", content: <Overview /> },
6    { value: "activity", label: "Activity", badge: 3, content: <Activity /> },
7  ]}
8/>

Examples

Metrics panel

variant="line" with icons; listAction holds a period switch that changes every tab, and the chart redraws.

$12,480+8.2%vs previous 7 days

Inbox with counts

badge shows a count that follows what you read; each tab filters the same list.

Settings sections

orientation="vertical": the sections in a column beside their panel, the line gliding up and down; on a phone, above it.

Name

API reference

Tabs

Also takes every prop of Radix Tabs(opens in a new tab).

Prop	Type	Default
`items`	`{ value, label, icon?, badge?, disabled?, content? }[]` The tabs and their panels. Without content, it's just the row.	—
`value / defaultValue`	`string`	`the first tab`
`onValueChange`	`(value: string) => void` Called with the new value.	—
`variant`	`"default" \| "line"` A raised card on a muted track, or plain tabs with a sliding underline.	`"default"`
`orientation`	`"horizontal" \| "vertical"` vertical: the tabs in a column beside their panel; the card or a line at their start edge glides up and down.	`"horizontal"`
`fullWidth`	`boolean` The row fills the width.	`false`
`listAction`	`ReactNode` At the end of the tab row.	—
`children`	`ReactNode` More content under the panels.	—
`classNames`	`{ header, list, trigger, content }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Into the tab list, then into the panel
`←`or`→`	Move between tabs (and show them)
`↑`or`↓`	The same, with orientation="vertical"
`Home`or`End`	First / last tab

Accessibility

role="tablist" / "tab" / "tabpanel", with each panel labelled by its tab; a vertical list says so (aria-orientation).

Motion

The selected tab's card (or underline) glides to the tab you pick (--duration-considered, --ease-standard), and the new panel fades in from a soft blur. With reduced motion they just switch.