---
title: Tabs
description: Display content within different tabs.
---
---
The Tabs component allows you to organize content into different sections that can be switched between by the user. This is useful for displaying related information in a compact and user-friendly way.
## Usage
To use the `Tabs` component, you first need to add it to the `components` list of your `ContentApp`:
```dart
import 'package:jaspr_content/components/tabs.dart';
// ...
ContentApp(
components: [
Tabs(),
],
)
```
Then, you can use the `` and `` components in your content files:
```jsx
This is the content for the first tab.
This is the content for the second tab.
You can include other components and **markdown** inside a `TabItem`.
This is the content for the third tab.
```
This will render a set of tabs where users can click on "Tab 1", "Tab 2", or "Tab 3" to view their respective content. In this example, "Tab 2" will be selected by default.
---
### Tabs Properties
The `` component serves as a container for `TabItem`s and has the following attribute:
The `value` of the `TabItem` that should be selected by default when the tabs are first rendered. If not provided, the first `TabItem` will be selected.
---
### TabItem Properties
The `` component defines an individual tab and its content. It has the following attributes:
The text that will be displayed on the tab itself.
---
A unique identifier for this tab. This value is used by the `defaultValue` attribute of the parent `` component to specify which tab to select initially.
---
The content nested inside a `` tag will be displayed when that tab is active. You can include any valid markdown or other custom components within a ``.
ZW5kZW5yYWhheXU5QGdtYWlsLmNvbQ==