MkSaaS DocsTabs
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
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.
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
</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>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>