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

    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