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

Fumadocs Framework: Tabs

URL: /docs/ui/components/tabs Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/tabs.mdx

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

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

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>

Tabs

On this page