Writing contentComponents

Tab

View as Markdown

The <Tabs> component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.

Usage

☝️ Welcome to the content that you can only see inside the first tab.

Markdown
1<Tabs>
2  <Tab title="First tab">
3    ☝️ Welcome to the content that you can only see inside the first tab.
4  </Tab>
5  <Tab title="Second tab">
6    ✌️ Here's content that's only inside the second tab.
7  </Tab>
8  <Tab title="Third tab">
9    💪 Here's content that's only inside the third tab.
10  </Tab>
11  </Tabs>

Variants

Language synchronization

Tabs with the same language automatically synchronize across your documentation site. When a user selects a language, all tabs with that language switch to match. Language preferences persist across browser sessions.

1console.log("First code block!");
1console.log("Second code block – language syncs with the one above!");
Markdown
1<Tabs>
2  <Tab title="TypeScript" language="typescript">
3    ```typescript
4    console.log("Content inside the TypeScript tab");
5    ```
6  </Tab>
7  <Tab title="Python" language="python">
8    ```python
9    print("Content inside the Python tab")
10    ```
11  </Tab>
12  <Tab title="Java" language="java">
13    ```java
14    System.out.println("Content inside the Java tab");
15    ```
16  </Tab>
17</Tabs>

Language-enabled tabs automatically synchronize with code blocks in that same language.

Tabs without the language property don’t synchronize with other tabs on your site.

1console.log("First code block!");
1console.log("Second code block – this won't sync with the one above!");
Markdown
1<Tabs>
2  <Tab title="TypeScript">
3    ```typescript
4    console.log("Content inside the TypeScript tab, with no language property");
5    ```
6  </Tab>
7  <Tab title="Python">
8    ```python
9    print("Content inside the Python tab, with no language property")
10    ```
11  </Tab>
12  <Tab title="Java">
13    ```java
14    System.out.println("Content inside the Java tab, with no language property");
15    ```
16  </Tab>
17</Tabs>

You can link directly to content in a specific language by adding ?language=<some-language> to the end of a URL. This sets which language tab wil be displayed by default when users visit the page.

For example, the following link opens with Java tabs displayed: https://buildwithfern.com/learn/docs/writing-content/components/tabs?language=java

This works with both CodeBlocks and Tab components that have a language property.

Properties

title
stringRequired

The title displayed in the tab header

language
string

The language associated with the code block. Any arbitrary string may be used.

When specified, enables global language synchronization across all tabs and code blocks with the same language value.

children
string | JSXRequired

The content to be displayed when the tab is selected. Can include text, markdown, and components.

id
string

The unique ID for the tab. Used for linking and navigation. If not specified, an ID will be generated automatically.

className
string

Additional CSS classes to apply to the tab

<TabGroup> properties

className
string

Additional CSS classes to apply to the tab group