> ## Documentation Index
> Fetch the complete documentation index at: https://tomee-mintlify-038c04aa.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Variation

> Use the variation component to conditionally show content based on a reader-selected variation, such as region, plan tier, or audience type.

Use the `Variation` component to show or hide content based on the variation a reader selects from the variation dropdown. Variations are useful when the same page needs to describe a different audience, region, plan tier, or deployment target without duplicating the page.

<Note>
  Variations are available on the [Willow theme](/customize/themes). On other themes, the configuration and switcher are ignored.
</Note>

## Configure variations

Add a `variations` object to your `docs.json` with the options you want readers to switch between. The first option is the default.

```json docs.json theme={null}
{
  "theme": "willow",
  "variations": {
    "options": [
      { "id": "cloud", "label": "Cloud" },
      { "id": "self-hosted", "label": "Self-hosted" }
    ]
  }
}
```

<ResponseField name="options" type="array" required>
  Variation options in display order. The first option is the default. Each option requires:

  * `id`: A stable, unique identifier used in the `Variation` component and URL.
  * `label`: The display name shown in the variation dropdown.
</ResponseField>

When `variations` is configured, a **Variation** dropdown appears above the existing view switcher in the table of contents sidebar, side panels, changelog filters, and inline on mobile.

## Use the component

Wrap conditional content in a `Variation` component and set `is` to the option `id` that should reveal it. Content outside a `Variation` block always shows.

```mdx theme={null}
Both audiences see this introduction.

<Variation is="cloud">
  Sign in at [app.example.com](https://app.example.com) to get your API key.
</Variation>

<Variation is="self-hosted">
  Generate an API key from the admin console on your instance.
</Variation>
```

To share content between multiple variations, pass an array to `is`:

```mdx theme={null}
<Variation is={["cloud", "self-hosted"]}>
  Store your API key in the `EXAMPLE_API_KEY` environment variable.
</Variation>
```

## How readers switch variations

* Readers pick a variation from the dropdown in the table of contents sidebar.
* The selection is saved in local storage per project, so readers keep their variation as they move between pages.
* The current variation is reflected in the URL as `?variation=<id>`, which makes it easy to share a link to a specific variation.

## Table of contents behavior

Headings inside a `Variation` block are automatically filtered from the table of contents when a different variation is active. Headings outside any `Variation` block always appear.

Nested `Variation` blocks intersect: an inner block only shows when its `is` value is compatible with every enclosing block.

## Properties

<ResponseField name="is" type="string or string[]" required>
  The variation `id` (or array of ids) that should reveal the wrapped content. Ids must match an option defined in `variations.options` in `docs.json`.
</ResponseField>