Tabs

Use Tabs for mutually exclusive examples, such as package managers, frameworks, or operating systems. Use CodeGroup instead when the only content in each tab is code.

Usage

<Tabs>
  <Tab title="npm">
    <Code lang="bash">npm install reallysimpledocs</Code>
  </Tab>
  <Tab title="pnpm">
    <Code lang="bash">pnpm add reallysimpledocs</Code>
  </Tab>
  <Tab title="yarn">
    <Code lang="bash">yarn add reallysimpledocs</Code>
  </Tab>
  <Tab title="bun">
    <Code lang="bash">bun add reallysimpledocs</Code>
  </Tab>
</Tabs>

Options

Tabs

Prop	Type	Default	Notes
`variant`	`string`	`undefined`	Basecoat tab variant, such as `"line"`.
`class`	`string`	`""`	Extra classes applied to the tabs root.

Tab

Prop	Type	Default	Notes
`title`	`string`	Required	Label shown in the tab trigger.

Examples

Default

npm install reallysimpledocs basecoat-css@beta tailwindcss

pnpm add reallysimpledocs basecoat-css@beta tailwindcss

yarn add reallysimpledocs basecoat-css@beta tailwindcss

bun add reallysimpledocs basecoat-css@beta tailwindcss

<Tabs class="w-full">
  <Tab title="npm">
    <Code lang="bash">npm install reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="pnpm">
    <Code lang="bash">pnpm add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="yarn">
    <Code lang="bash">yarn add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
  <Tab title="bun">
    <Code lang="bash">bun add reallysimpledocs basecoat-css@beta tailwindcss</Code>
  </Tab>
</Tabs>

Line variant

<Tabs variant="line" class="w-full">
  <Tab title="Integration">
    <Callout title="Recommended">
      Let the integration wire routes and assets for the docs section.
    </Callout>
  </Tab>
  <Tab title="Manual">
    <Callout type="warning" title="Manual setup">
      Manual wiring is useful for debugging, but it is not the normal install path.
    </Callout>
  </Tab>
</Tabs>