Tabs | Fern Documentation

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.

First Tab

Second Tab

Third Tab

☝️ 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>

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.

Language synchronization

Multiple Tabs with a language property automatically synchronize. This means when a user selects a tab with a specific language, all other tabs across your documentation site with the same language will automatically sync and switch to match. Language preferences are stored in client-side local storage and persist across browser sessions.

In the example below, choosing a language in either set of tabs will automatically update both sets to match:

TypeScript

Python

Java

1 console.log("First code block!");

TypeScript

Python

Java

1 console.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>

Tabs and CodeBlocks integration

Language-enabled Tabs automatically synchronize with CodeBlocks in that same language.

Tabs without the language property

Tabs without the language property don’t stay in sync with other tabs on your site. In the below example, choosing a language in either set of tabs doesn’t affect the other set of tabs:

TypeScript

Python

Java

1 console.log("First code block!");

TypeScript

Python

Java

1 console.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>