# Tabs

> Switch between related panels.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/tabs.json`

## Install

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@aspyn-io/kit";
```

### Basic

```tsx
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="analytics">…</TabsContent>
</Tabs>
```

### URL-synced tabs (Next.js)

Drive the active tab from the URL so views are shareable and survive refresh.

```tsx
"use client";
import { useRouter, useSearchParams } from "next/navigation";

const router = useRouter();
const tab = useSearchParams().get("tab") ?? "overview";

<Tabs value={tab} onValueChange={(v) => router.push(`?tab=${v}`)}>…</Tabs>
```

### Vertical

Set orientation="vertical" for a side-by-side list and content panel.

```tsx
<Tabs orientation="vertical" defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="general">…</TabsContent>
</Tabs>
```

### With icons

Add a leading icon inside each trigger.

```tsx
<TabsTrigger value="account">
  <UserIcon /> Account
</TabsTrigger>
```

### Disabled tab

Disable a trigger to keep its view unavailable.

```tsx
<TabsTrigger value="reports" disabled>
  Reports
</TabsTrigger>
```

## Notes

- Arrow keys move between triggers; Home/End jump to first/last (Radix).