shadcn.io is not affiliated with official shadcn/ui
Version Switcher Sidebar Block for React Aria
An API's docs in a fixed-height window whose sidebar header holds a version select from v3.0.0 to v1.0.0; picking an older version removes the pages it lacks, falls back to the introduction and offers Go to latest.
Installation
Overview
Let readers choose the version of the docs they are using with this version switcher sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar: the API's mark, a Native Select of four versions and the pages of that version in three groups (Getting started, Guides and Reference). The version changes the navigation itself. Client SDK arrived in v2.0.0, Webhooks in v2.4.1 and Batch requests in v3.0.0, so an older version lists fewer pages and a group left with none disappears. If the page you're on isn't in the version you pick, the window shows the introduction and its status line says why. A bar under the top bar always says which version you're reading, and on an old one it holds a Go to latest Button. The page is a docs page in real text: an outline of what's on it, then its paragraphs with the version written in. Folded to icons the rail shows the pages' icons with tooltips, and on a phone it is a sheet. It's built from Sidebar, Native Select, Button, Badge and Guides, with a CSS entrance only. For API docs, SDK references and any product with versions that differ.
FAQ
How does the version change the navigation?
Each page in PAGES records the oldest version that has it (added), and the rail lists a page when the chosen version is that one or newer. Pick v1.0.0 and the Guides group is gone entirely because all three of its pages came later; pick v2.0.0 and only Client SDK is left in it. The count in the status line comes from the same rule, so the rail, the status and the page can't disagree.
What happens to the page I'm reading?
If the new version has it, you stay on it, with the version in its text updated. If not, the window shows the introduction and says so: "v1.0.0: 5 pages. Webhooks is not in v1.0.0, so this is the introduction." Go to latest returns to v3.0.0 and moves focus to the page's heading, because the button steps aside once you are on the latest version, and the bar keeps its height so nothing jumps.
Why is the version a native select?
So it works in the phone sheet on every library, where floating popups from inside a sheet are unreliable, and so it opens the operating system's own picker on a phone. It sits in a Field with a hidden label ("API version"). In your app you can swap it for the full Select if the rail is never a sheet.
What stays in the page, and how do I connect it?
Everything. The eight pages and their text are typed at the top of the file and nothing is fetched. Replace PAGES and VERSIONS with your docs' manifest, and make the pages' added field your own rule for what each version contains. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. With real routes, put the version in the path and keep it when the reader moves between pages.
Is it accessible?
The select is named "API version" and changes the page as you pick, as a native select does. The pages are links in a navigation landmark whose groups are named by their labels, with the open one marked as the current page. The notice bar is plain text, so screen readers get the same fact the status line announces. One polite status line says what a version change did to the navigation, and the page is a scrollable region you can reach with Tab, named with its version.