> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/radix/tabs.md).

# Tabs

> Based on [Radix Tabs](https://www.radix-ui.com/primitives/docs/components/tabs)

The Tabs component displays a set of panels with content that are shown one at a time. Users can switch between panels by clicking on tab triggers.

## When to Use

Use Tabs for:

* Organizing related content into sections
* Settings pages with multiple categories
* Product pages with details, reviews, and specifications
* Any content that can be logically grouped

## Structure

The Tabs component consists of several parts:

| Component       | Description                                         |
| --------------- | --------------------------------------------------- |
| **Tabs**        | The root component that manages which tab is active |
| **Tabs List**   | Container for all the tab triggers                  |
| **Tab Trigger** | The clickable tab button                            |
| **Tab Content** | The panel content shown when a tab is active        |

## How to Use

1. Drag a **Tabs** component from Components > Radix onto your canvas
2. The component comes with two tabs pre-configured
3. To add more tabs:
   * Duplicate a **Tab Trigger** inside the Tabs List
   * Duplicate a **Tab Content** panel
4. Tab Triggers and Tab Contents are connected by their order in the Navigator
   * The first Trigger shows the first Content, second shows second, etc.

## Using with Collections

When generating tabs dynamically with a [Collection](/university/core-components/collection.md), you need to provide a unique `value` property for both the Tab Trigger and Tab Content:

1. Add the `value` property to Tab Trigger: Settings > Properties & Attributes > "+"
2. Add the same `value` property to the corresponding Tab Content
3. Bind a unique identifier (like an ID or slug) from your data to both

## Properties

Some commonly used properties (see the Settings panel for all available options):

| Property  | Description                                                                    |
| --------- | ------------------------------------------------------------------------------ |
| **value** | The currently active tab. Use this to control which tab is shown on the canvas |

## Styling States

Some common states (you can also create custom states):

* **Active** (`[data-state=active]`) - The currently selected tab trigger
* **Inactive** (`[data-state=inactive]`) - Unselected tab triggers

## Related

* [Accordion](/university/radix/accordion.md) – Vertically stacked expandable sections
* [Collapsible](/university/radix/collapsible.md) – Single expandable panel
* [Collection](/university/core-components/collection.md) – Generate tabs dynamically from data
* [Navigation Menu](/university/radix/navigation-menu.md) – Navigation with dropdowns and links


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/radix/tabs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.