A Tabs component built with Radix UI, with additional features such as persistent and shared value.
Javascript Rust Typescript
Hello World in Javascript
Javascript Rust
Value is shared! Try refresh and see if the value is persisted
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 >
By passing an id
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 >
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
.
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 >
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 Rust C++
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 >
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 >