# Tabs (https://openknowledge.ai/docs/reference/components/tabs)

Horizontal tab strip + active panel below. Each `<Tab>` child is one panel; clickable pills at the top switch the active one. Active selection is ephemeral (resets on reload)

## Example

### Install

Run `npm install @inkeep/open-knowledge` to add the CLI to your project.

### Configure

Point `.ok/config.yml` at your content directory. Frontmatter, ignore
patterns, and folder defaults all live in this one file.

### Serve

`ok start` boots the collaboration server and opens the editor.

```mdx
<Tabs>
  <Tab label="One">Body of the first tab panel.</Tab>
  <Tab label="Two">Body of the second tab panel.</Tab>
</Tabs>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | no |  | HTML id attribute for deep-linking (e.g. \`#install-tabs\`) |

## Also: `<Tab>`

A single tab panel inside a `<Tabs>` container — carries the strip label and the block-content body.

### A single Tab

Each `<Tab>` is one panel of a `<Tabs>`
group. The `label` becomes the pill at the top; the body
renders when the pill is active.

### Second panel

Switch between panels without losing scroll — the parent tracks which
one is active client-side.

```mdx
<Tab label="Tab">
  Panel content — must be nested inside a `<Tabs>` parent.
</Tab>
```

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | yes | `Tab` | Tab strip label — shown in the clickable pill at the top |
| `id` | `string` | no |  | HTML id attribute for deep-linking (e.g. \`#tab-npm\`) |

*Also matches:* `tabs`, `tabbed`, `panels`, `tabgroup`, `switcher`

## Author it

Type `/tabs` in the editor to insert it from the slash menu, or write the tag directly in source mode. The Properties panel on the right of the editor exposes every prop above as a form field once the block is selected.