# Tabs

> A set of tabs whose active view comes from routing rather than tracked selection state: each tab renders as a native link carrying the `tab` role, and whichever one points at the page currently being viewed carries `aria-selected="true"` to read as the active tab.

```ts
import { Tabs } from "@sdxc/ui";
```

Renders the root host: a plain `<div>` stacking Tabs.List above
Tabs.Panels, switching to a side-by-side row when `orientation`
is `"vertical"` and sharing that axis through component context.

## Examples

```tsx
<Tabs>
	<Tabs.List aria-label={t("settings.sections")}>
		<Tabs.Tab href="/settings/profile" aria-selected="true">{t("settings.profile")}</Tabs.Tab>
		<Tabs.Tab href="/settings/billing" aria-selected="false">{t("settings.billing")}</Tabs.Tab>
	</Tabs.List>
	<Tabs.Panels>
		<Tabs.Panel>{t("settings.profile.body")}</Tabs.Panel>
	</Tabs.Panels>
</Tabs>
```

```tsx
<Tabs orientation="vertical">
	<Tabs.List aria-label={t("settings.sections")}>
		<Tabs.Tab href="/settings/profile" aria-selected="true">{t("settings.profile")}</Tabs.Tab>
		<Tabs.Tab href="/settings/billing" aria-selected="false">{t("settings.billing")}</Tabs.Tab>
	</Tabs.List>
	<Tabs.Panels>
		<Tabs.Panel>{t("settings.profile.body")}</Tabs.Panel>
	</Tabs.Panels>
</Tabs>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |

Also accepts everything in `TagProps<"div">`.


### Tabs.List

Renders the tab strip: a `role="tablist"` host laying Tabs.Tab links out in a row, or a column when `orientation` is `"vertical"`, with a sliding accent bar reading `--ui-tab-indicator-*` custom properties.

| Prop | Type | Description |
| --- | --- | --- |
| `activeIndex?` | `number` | Index of the currently active tab, for a route-driven tab bar with no client-side measurement of the active tab's bounds. Given with `tabSize`, Tabs.List computes its own indicator position. |
| `tabSize?` | `SizeValue` | Every Tabs.Tab's fixed size along the enclosing Tabs's layout axis, required alongside `activeIndex` since the indicator's offset depends on how far apart the tabs sit. |

Also accepts everything in `TagProps<"div">`.


### Tabs.Tab

Renders a single tab: a native `<a>` carrying the `tab` role, its own border edge kept transparent to reserve space for the sliding indicator.

Takes no props of its own.

### Tabs.Panels

Renders the panel region: a `<div>` growing to fill whatever space is left beside or beneath Tabs.List.

Also accepts everything in `TagProps<"div">`.


### Tabs.Panel

Renders the current tab's content: a padded `<div>` carrying the `tabpanel` role, focusable by default so a keyboard user can jump straight into it after activating a tab, with a focus-visible ring.

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis Tabs.List's links lay out along: a single row with the active indicator running beneath it, or a single column with the indicator running alongside it. |

## Also exported

- `tabIndicatorMix`