Tabs

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

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 'fumadocs-ui/components/tabs';
 
<Tabs items={['Javascript', 'Rust']}>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>

Without `value`

Without a value, it detects from the children index. Note that it might cause errors on re-renders, it's not encouraged if the tabs might change.

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

Demo with Re-renders

Javascript is weird

Item 1

Shared Value

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

<Tabs groupId="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 groupId="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 value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
</Tabs>

Link to Tab

Use HTML id attribute to link to a specific tab.

<Tabs items={['Javascript', 'Rust', 'C++']}>
  <Tab value="Javascript">Javascript is weird</Tab>
  <Tab value="Rust">Rust is fast</Tab>
  <Tab id="tab-cpp" value="C++">
    `Hello World`
  </Tab>
</Tabs>

You can add the hash #tab-cpp to your URL and reload, the C++ tab will be activated.

Javascript is weird

Additionally, the updateAnchor property can be set to true in the Tabs component to automatically update the URL hash whenever time a new tab is selected:

<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
  <Tab id="tab-js" value="Javascript">
    Javascript is weird
  </Tab>
  <Tab id="tab-rs" value="Rust">
    Rust is fast
  </Tab>
  <Tab id="tab-cpp" value="C++">
    `Hello World`
  </Tab>
</Tabs>

Hello!

Advanced

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

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

On this page