LogoMkSaaS Docs
LogoMkSaaS Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
MDX
X (Twitter)
Components

Tabs

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

Hello World in Javascript
Hello World in Rust
Also works if items are not the same
Value is shared! Try refresh and see if the value is persisted
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
Rust is fast

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++">
    `

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

Javascript is weird
Rust is fast

Hello World

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

Hello!

World!

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>

Steps

Adding steps to your docs

Type Table

A table for documenting types

Table of Contents

Usage
Without value
Demo with Re-renders
Shared Value
Persistent
Default Value
Link to Tab
Advanced
Hello World
`
</Tab>
</Tabs>
</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>