---
title: Tabs
description: Render provider-backed tab navigation and content panels
type: reference
summary: Use Tabs for navigation-only controls or TabsWithChildren and TabContent for mounted content panels.
url: /docs/components/tabs
source: apps/template/content/docs/components/tabs.mdx
related:
  - /docs/components
  - /docs/syntax
---

# Tabs

import {
  TabContent,
  TabsWithChildren,
} from "@vercel/geistdocs/components/tabs-with-children";

<TabsWithChildren ariaLabel="Setup method" tabs={["Dashboard", "CLI"]}>
  <TabContent className="mt-4 text-copy-14" order={1}>
    Configure the project in the dashboard.
  </TabContent>
  <TabContent className="mt-4 text-copy-14" order={2}>
    Run the setup command in your terminal.
  </TabContent>
</TabsWithChildren>

```tsx
import {
  TabContent,
  TabsWithChildren,
} from "@vercel/geistdocs/components/tabs-with-children";

<TabsWithChildren ariaLabel="Setup method" tabs={["Dashboard", "CLI"]}>
  <TabContent className="mt-4 text-copy-14" order={1}>
    Configure the project in the dashboard.
  </TabContent>
  <TabContent className="mt-4 text-copy-14" order={2}>
    Run the setup command in your terminal.
  </TabContent>
</TabsWithChildren>;
```

`TabsWithChildren` associates labels with `TabContent` panels by order. Inactive content remains mounted so Markdown and search exports preserve every panel.

For a navigation-only tab list without panels, import the lower-level `Tabs` component from `@vercel/geistdocs/components/tabs`. Both forms are available in the default MDX component map.