Tabs

Docs

Tabs

Adding Tabs to your documentation

A Tabs component built with Radix UI, with additional features such as persistent and shared value.

it is an optional component which won't be loaded by default.

Hello World in Javascript

Value is shared! Try refresh and see if the value is persisted

Usage

Import it in your MDX documents.

import { Tab, Tabs } from 'next-docs-ui/components/tabs'
 
<Tabs items={['Javascript', 'Rust']}>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>

Shared Value

By passing an id property, you can share a value across all tabs with the same id.

<Tabs id="language" items={['Javascript', 'Rust']}>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>

Persistent

You can enable persistent by passing a persist property. The value will be stored in localStorage, with its id as the key.

<Tabs id="language" items={['Javascript', 'Rust']} persist>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>

Persistent only works if you have passed an id.

Default Value

Set a default value by passing defaultIndex.

<Tabs
  items={['Javascript', 'Rust']}
  defaultIndex={1}
>...</Tab>

Advanced

You can use the styled Radix UI primitive directly from exported Primitive.

import { Primitive } from 'next-docs-ui/components/tabs'
 
<Primitive.Tabs>
  <Primitive.TabsList>
    <Primitive.TabsTrigger />
  </Primitive.TabsList>
  <Primitive.TabsContent />
</Primitive.Tabs>

Last updated on

Steps

Type Table

Usage

Shared Value

Persistent

Default Value

Advanced

On this page