shadcn.io is not affiliated with official shadcn/ui
API Docs Sidebar Block for React
A parcel-tracking API reference in a fixed-height window whose wide sidebar filters twelve endpoints by method with GET, POST, PUT and DELETE toggles, folds three resource groups and shows the chosen request with a parameters table.
Installation
Overview
Cut an API reference down to the calls you use with this API docs sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a wide Sidebar for Fennelspec, the reference of a parcel-tracking API. Its header is a row of four Toggle Group buttons, GET, POST, PUT and DELETE, all on; turning one off hides the endpoints that use it from the Users, Parcels and Returns groups, and "9 of 12 endpoints" is said after each press. Each endpoint is its method in monospace and its name, never a colour. The groups open and shut with a Collapsible and count the endpoints still shown. Authentication, Webhooks and SDKs stay as plain pages. The page shows the chosen endpoint's request in text: its method and path, one line about it and a table of parameters, then what it returns. Folded to icons, the rail keeps one icon per group. It's built from Sidebar, Toggle Group, Collapsible, Avatar and Guides, with a CSS entrance only. For API references, SDK docs and any rail whose entries come in kinds.
FAQ
How does the method filter work?
The four toggles are a multiple-choice group with all of them on. Each one that is off removes the endpoints with that method from the list; the groups keep their counts ("3/5") and say so in their names for a screen reader. Turn all four off and each group says no endpoint uses the methods that are on. The current endpoint stays open on the page even if the filter hides it, with a note saying so.
How do the groups open and fold?
Each of Users, Parcels and Returns is a row whose button opens and closes its endpoints, with the state in aria-expanded. Folded to icons there is no list to open, so pressing a group's icon unfolds the rail onto it. The status line says which group opened or closed.
Why are methods written as words and not coloured?
Colour alone does not carry meaning for everyone, and a theme can change it. The method sits at the start of the row in monospace and bold type, in the link's accessible name too ("GET List parcels"), so it reads the same in every theme and to a screen reader.
What does the page show?
For an endpoint: its method and path in monospace, one line about what it does, a table of parameters (name, where it goes, type, required or optional, a note) and what it returns. On narrow pages the where, type and required columns fold into the name cell. The other pages are short lists.
What stays in the page, and how do I connect it?
Everything. The endpoints and parameters are typed in the file, and nothing is sent. To make it real, generate the list from your OpenAPI file and keep the filter as it is. The rows are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element. Endpoint rows are sub-menu buttons with an href.