Navigation Tabs

Tabs

One view at a time — arrow keys move between tabs (Radix Tabs).

Preview

Zostel Manali

Walk the deodar woods to Hadimba. Then go higher.

WALK

CLIMB

RISE

Usage

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "zostel-ui";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="rooms">Rooms</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="rooms">…</TabsContent>
</Tabs>

{/* the same skin for something that isn't a tab (SectionNav's links): the classes, never a copy; the one on show is data-state="active" */}
<ul className={cn(tabsListClassName, "gap-1")}>
  <li><a href="#stays" data-state="active" aria-current="true" className={tabsTriggerClassName}>Stays</a></li>
</ul>

Tabs

Prop	Type	Default	Description
`value / defaultValue`	`string`	—	The open tab.
`onValueChange`	`(value: string) => void`	—	Called when it changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Which arrow keys move.
`tabsListClassName · tabsTriggerClassName`	`string`	—	The segmented skin, exported: the well, and a segment (the one on show, data-state="active", is the card’s colours with an inset line in muted-foreground, which clears 3:1 by day and at night).

value / defaultValue

Type: string

Default: —

The open tab.

onValueChange

Type: (value: string) => void

Default: —

Called when it changes.

orientation

Type: "horizontal" | "vertical"

Default: "horizontal"

Which arrow keys move.

tabsListClassName · tabsTriggerClassName

Type: string

Default: —

The segmented skin, exported: the well, and a segment (the one on show, data-state="active", is the card’s colours with an inset line in muted-foreground, which clears 3:1 by day and at night).