> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> A tabs component that organizes content into multiple panels.

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/tabs/tabs.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=7fc4b777e196466e49d4e77646217667" alt="Basic Usage" width="1000" height="140" data-path="images/components/tabs/tabs.png" />

```liquid theme={null}
{% tabs %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}
```

## Examples

### Basic Usage

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/tabs/tabs.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=7fc4b777e196466e49d4e77646217667" alt="Basic Usage" width="1000" height="140" data-path="images/components/tabs/tabs.png" />

```liquid theme={null}
{% tabs %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}
```

### Well Variant

<img src="https://mintcdn.com/evidence/ImoR9rIJqT9N0Esa/images/components/tabs/example-1.png?fit=max&auto=format&n=ImoR9rIJqT9N0Esa&q=85&s=c3172bf113b4bff2c440c566ecd6f62f" alt="Well Variant" width="1000" height="140" data-path="images/components/tabs/example-1.png" />

```liquid theme={null}
{% tabs variant="well" %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}
```

## Attributes

<ResponseField name="variant" type="string" default="default">
  Visual style variant of the tabs

  **Allowed values:**

  * `default`
  * `well`
</ResponseField>

<ResponseField name="full_width" type="boolean" default="false">
  Whether the tabs should take the full width of their container
</ResponseField>

<ResponseField name="color" type="string">
  Custom color for active tab text and underline. Uses CSS color values.
</ResponseField>

<ResponseField name="align" type="string" default="left">
  Horizontal alignment of tabs. Note: align right only affects the default variant.

  **Allowed values:**

  * `left`
  * `right`
</ResponseField>

<ResponseField name="print_break" type="string" default="auto">
  Controls page breaks inside this component in PDF exports. `auto` allows content to flow across pages, `avoid` attempts to keep all content together on one page.

  **Allowed values:**

  * `auto`
  * `avoid`
</ResponseField>

<ResponseField name="width" type="number">
  Set the width of this component (in percent) relative to the page width
</ResponseField>

## Allowed Children

* [tab](/components/tab)