# Tabs

Render a named-panel disclosure pattern. It's like having multiple pages without actually leaving the page.

## Notes

- Provide stable ids for each tab/panel pair.
- Arrow keys plus Home and End navigation are wired in for keyboard users.
- Keep tab labels short enough to scan quickly. Don't write a sentence in a tab label.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| tabs (required) | `TabItem[]` | - | List of tab items. |
| defaultTab | `string` | - | ID of the default active tab. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<Tabs tabs={tabs} defaultTab="overview" />
```