Writing contentComponents

Versions

View as Markdown

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. You can use site-wide versioning and the <Versions> component independently or together.

Usage

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

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

Markdown
1<Versions>
2  <Version version="v2.0" title="Version 2.0" default>
3    This content is for version 2.0 (the default). When selected, the URL will show `?v=v2.0`.
4  </Version>
5  <Version version="v1.0" title="Version 1.0">
6    This content is for version 1.0. When selected, the URL will show `?v=v1.0`.
7  </Version>
8</Versions>

Variants

Nested components

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

$npm install @fern/plant-sdk@2.0.0

Version 2.0 includes breaking changes. See the migration guide.

$npm install @fern/plant-sdk@1.0.0
Markdown
1<Versions>
2  <Version version="v2" title="v2.0" default>
3    ```bash
4    npm install @fern/plant-sdk@2.0.0
5    ```
6    <Note>
7      Version 2.0 includes breaking changes. See the migration guide.
8    </Note>
9  </Version>
10  <Version version="v1" title="v1.0">
11    ```bash
12    npm install @fern/plant-sdk@1.0.0
13    ```
14  </Version>
15</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.

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

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

Markdown
1<Versions paramName="sdk-version">
2  <Version version="current" title="Current" default>
3    Content for the current SDK version. When selected, the URL will show `?sdk-version=current`.
4  </Version>
5  <Version version="legacy" title="Legacy">
6    Content for the legacy SDK version. When selected, the URL will show `?sdk-version=legacy`.
7  </Version>
8</Versions>

Properties

<Versions> properties

paramName
stringDefaults to 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
stringRequired

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

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.