> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Versions

> The Versions component displays content that changes based on version selection, with a dropdown to switch between versions.

The `<Versions>` component displays different content based on version selection. Users can switch between versions using a dropdown, and the selected version persists in the URL query parameter.

For versioning your entire docs site, use [site-wide versioning](/learn/docs/configuration/versions). You can use site-wide versioning and the `<Versions>` component independently or together.

## Usage

#### Version 2.0

This content is for version 2.0 (the default). When selected, the URL will show `?v=v2.0`.

#### Version 1.0

This content is for version 1.0. When selected, the URL will show `?v=v1.0`.

**`Markdown`**

```jsx Markdown
<Versions>
  <Version version="v2.0" title="Version 2.0" default>
    This content is for version 2.0 (the default). When selected, the URL will show `?v=v2.0`.
  </Version>
  <Version version="v1.0" title="Version 1.0">
    This content is for version 1.0. When selected, the URL will show `?v=v1.0`.
  </Version>
</Versions>
```

## Variants

### Nested components

You can include any content inside each version, including code blocks, callouts, and other components.

#### v2.0

```bash
npm install @fern/plant-sdk@2.0.0
```

Version 2.0 includes breaking changes. See the migration guide.

#### v1.0

```bash
npm install @fern/plant-sdk@1.0.0
```

#### Markdown

````jsx
<Versions>
  <Version version="v2" title="v2.0" default>
    ```bash
    npm install @fern/plant-sdk@2.0.0
    ```
    <Note>
      Version 2.0 includes breaking changes. See the migration guide.
    </Note>
  </Version>
  <Version version="v1" title="v1.0">
    ```bash
    npm install @fern/plant-sdk@1.0.0
    ```
  </Version>
</Versions>
````

### Custom query parameter

By default, the selected version is stored in the URL using the `v` query parameter. You can customize this with the `paramName` prop to avoid conflicts when using multiple `<Versions>` components on the same page.

#### Current

Content for the current SDK version. When selected, the URL will show `?sdk-version=current`.

#### Legacy

Content for the legacy SDK version. When selected, the URL will show `?sdk-version=legacy`.

**`Markdown`**

```jsx Markdown
<Versions paramName="sdk-version">
  <Version version="current" title="Current" default>
    Content for the current SDK version. When selected, the URL will show `?sdk-version=current`.
  </Version>
  <Version version="legacy" title="Legacy">
    Content for the legacy SDK version. When selected, the URL will show `?sdk-version=legacy`.
  </Version>
</Versions>
```

## Properties

### `<Versions>` properties

**`paramName`** `string` — default: v

The query parameter name used to store the selected version in the URL.

---

**`className`** `string`

Additional CSS classes to apply to the versions container.

---

### `<Version>` properties

**`version`** `string` — required

The version identifier. Must be unique within the `<Versions>` component. This value is used in the URL query parameter.

---

**`title`** `string`

The display title shown in the dropdown. If not specified, the `version` value is used.

---

**`default`** `boolean`

Whether this version should be selected by default when no version is specified in the URL.

---

**`children`** `string | JSX` — required

The content to display when this version is selected. Can include text, Markdown, and components.

---

**`className`** `string`

Additional CSS classes to apply to the version content.

---

> The Versions component displays content that changes based on version selection, with a dropdown to switch between versions.