# InstallTabs

> Package-manager or language chooser plus a command row.

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

Renders a radio-driven dialect strip. Nest InstallTabs.Option
children; the checked option's command row reveals via CSS.

## Examples

```tsx
<InstallTabs name="pkg" aria-label={t("install.label")}>
	<InstallTabs.Option value="bun" label="bun" defaultChecked>
		bun add @sdxc/ui
	</InstallTabs.Option>
	<InstallTabs.Option value="npm" label="npm">
		npm add @sdxc/ui
	</InstallTabs.Option>
</InstallTabs>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `string` | Shared `name` for the radio group that switches dialects. Required so multiple strips on one page stay independent. |
| `"aria-label"` | `string` | Accessible name for the strip. Required — the library ships no copy. |
| `children` | `RemixNode` | One or more InstallTabs.Option dialects. |

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


### InstallTabs.Option

One dialect: a radio, its label, and a command row that shows when checked.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Radio value written for this dialect. |
| `label` | `RemixNode` | Visible tab label for the dialect. |
| `defaultChecked?` | `boolean` | Marks this dialect as the initially selected one. Only one option in a strip should pass `defaultChecked`. |
| `actions?` | `RemixNode` | Optional trailing control beside the command — typically a copy button the page supplies. |
| `children` | `RemixNode` | Command or snippet shown when this dialect is selected. |

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