# 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.

<Note>
  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.
</Note>

## Usage

<div>
  <div>
    <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>
  </div>
</div>

```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.

<div>
  <div>
    <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>
  </div>
</div>

<CodeBlock title="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>
  ````
</CodeBlock>

### 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.

<div>
  <div>
    <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>
  </div>
</div>

```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

<ParamField path="paramName" type="string" default="v">
  The query parameter name used to store the selected version in the URL.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the versions container.
</ParamField>

### `<Version>` properties

<ParamField path="version" type="string" required={true}>
  The version identifier. Must be unique within the `<Versions>` component. This value is used in the URL query parameter.
</ParamField>

<ParamField path="title" type="string" required={false}>
  The display title shown in the dropdown. If not specified, the `version` value is used.
</ParamField>

<ParamField path="default" type="boolean" default={false}>
  Whether this version should be selected by default when no version is specified in the URL.
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  The content to display when this version is selected. Can include text, Markdown, and components.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the version content.
</ParamField>