# Tabs

> A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.

## Facts

- **Product**: Max
- **Family**: Navigation
- **Global**: `window.DigitalCrew.Tabs`
- **Source**: `max-agent: src/components/ui/tabs.tsx`
- **Import in the app**: `import { Tabs } from "@/components/ui/tabs";`
- **Live preview**: /design/components/tabs/preview.html
- **Page**: /design/components/tabs

## Guidelines

**Use it for** 2–6 views of the same object (Overview, Activity, Emails). Different destinations belong in the sidebar. Below `lg`, Max uses a full-width segmented control.

**What you provide**: `Tabs` with `defaultValue` or `value`/`onValueChange`, a `TabsList` of `TabsTrigger`s (short nouns, sentence case; `disabled` for unavailable views), and a `TabsContent` per value. The list scrolls horizontally when it overflows.

**Known gap**: the active highlight jumps rather than slides (noted in Max's motion guide).

## API

```ts
declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): any;
declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): any;
declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): any;
declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): any;
export { Tabs, TabsList, TabsTrigger, TabsContent };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Tabs, { defaultValue: "overview", className: "max-w-xl" },
    h(DC.TabsList, null,
      h(DC.TabsTrigger, { value: "overview" }, "Overview"),
      h(DC.TabsTrigger, { value: "activity" }, "Activity"),
      h(DC.TabsTrigger, { value: "emails" }, "Emails"),
      h(DC.TabsTrigger, { value: "notes", disabled: true }, "Notes")),
    h(DC.TabsContent, { value: "overview" },
      h(DC.Card, null, h(DC.CardHeader, null, h(DC.CardTitle, null, "Northwind Traders"), h(DC.CardDescription, null, "Series B fintech · 240 people · Paris")))),
    h(DC.TabsContent, { value: "activity" }, h("p", { className: "text-sm text-muted-foreground p-2" }, "12 events this week.")),
    h(DC.TabsContent, { value: "emails" }, h("p", { className: "text-sm text-muted-foreground p-2" }, "3 threads.")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Navigation

- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [Header](/design/components/header.md): The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [ListMapToggle](/design/components/list-map-toggle.md): A two-button segmented switch between a List view and a Map view.
- [Pagination](/design/components/pagination.md): Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.