Tab

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

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>

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.

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>

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

Tabs without the language property

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

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>

Linking to language-specific content

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.

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

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>

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>

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>

Usage

First tab

Second tab

Third tab

Variants

Language synchronization

TypeScript

Python

Java

TypeScript

Python

Java

Tabs without the language property

TypeScript

Python

Java

TypeScript

Python

Java

Linking to language-specific content

Properties

<TabGroup> properties

Usage

First tab

Second tab

Third tab

Variants

Language synchronization

TypeScript

Python

Java

TypeScript

Python

Java

Tabs without the language property

TypeScript

Python

Java

TypeScript

Python

Java

Linking to language-specific content

Properties

<TabGroup> properties

`<TabGroup>` properties

`<TabGroup>` properties