shadcn.io is not affiliated with official shadcn/ui
API Endpoint Changelog Block for Ark UI
One new endpoint spotlighted in a split: its method, path and version, a table of the new request fields, and a tabbed window with the request, the response and the error codes in focusable code regions with Copy buttons.
Installation
Overview
An API endpoint changelog for React with Ark UI, written for Muxwell, a fictional media-processing API. The block is a split with a divider. At the start sit the title, the endpoint (POST /v2/webhooks/subscribe, with a method badge and "Added in v2.8") and a table of the new request fields: each with its name, type and one line on what it does. At the end an inset window sits on the page's lines with its tab list on the top rule: Request, Response and Errors. Each panel is a focusable pre > code region with a Copy button that tells screen readers when it has copied; every panel is stacked unseen under the open one, so switching tabs never moves the page. On a phone the split stacks, the tabs scroll sideways and long lines scroll in their region. It's built from Tabs, Copy Button, Badge, Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For API docs, release notes about a single endpoint and developer announcements. The endpoint, the keys and the payloads are example data.
FAQ
How do I change the endpoint and the samples?
Edit FIELDS for the table and SAMPLES for the tabs (an id, a label, a heading over the code, the code itself and an action phrase for the Copy button's name). The three code strings (REQUEST, RESPONSE, ERRORS) sit above them. The title, the path and the version in the header are plain text in the same file.
Why is the field list a native table and not the Type Table component?
The Type Table folds each field's description away behind a click, and here the one line each field gets is the point, so it is always visible. A native table with a caption (hidden, for screen readers), header cells and row headers is also identical on every base. Optional fields say "optional" in words.
What does the Copy button do?
It copies that panel's code to the clipboard, swaps its icon for a check and, through a polite status line, tells screen readers what it copied ("Copied the curl request"). If the clipboard refuses it says it couldn't copy. The code is also plain text in a focusable region, so it can be selected by hand and scrolls on a phone.
How do the tabs work with a keyboard?
Tab enters the tab list, the arrow keys move between Request, Response and Errors and select them, and Home and End jump to the ends. Tab again reaches the code region, which scrolls with the arrow keys, and then the Copy button.
Why doesn't the window change height between tabs?
An unseen copy of every panel sits in the same grid cell as the open one, so the window is always as tall as the tallest panel (the request).
How does it fit on a phone and in a right-to-left layout?
Below lg the split stacks (the title and fields first, the window under them) and a rule is drawn between the two. The tab list scrolls sideways if the tabs don't fit, and the code keeps its left-to-right direction in a right-to-left layout, since code doesn't mirror.