shadcn.io is not affiliated with official shadcn/ui
API Requests Timeline Block for Vue
A session of nine API calls on a vertical rail with a column head: method word, path, status in words and a duration bar, each row opening to its headers and a Copy as cURL button.
Installation
Overview
Read one session of API calls in order, and copy any of them as a cURL command, with this API requests timeline for Vue with Ark UI. It is written for Callscope, a fictional API inspector. A hairline frame with a plus mark on each corner holds a band that counts the session ("9 requests, median 67 ms, 2 errors"), a column head (Request, Status, Time taken) and a vertical rail with a node for every call. Each row has the method as a word in a mono pill (GET, POST, PUT, DELETE), the path in mono, the status in words with a glyph ("200 OK", "404 Not found", with a cross on the two errors) and a duration bar drawn in proportion to the slowest call, which carries the word "slowest". A row is a button: it opens in place, one at a time, to the request and response headers, the cURL command in a scroll region you can reach with the keyboard, and a "Copy as cURL" button that puts the command on the clipboard. The panel keeps its height whichever row is open, and a polite status line says what was opened or copied. It is built from Guides, Badge, Copy Button and lucide icons, with a CSS entrance only. For API consoles, request inspectors and debugging panes. The session is example data.
FAQ
How do I change the requests?
Edit CALLS at the top of the file. Each call comes from one call(...) line with an id, an ISO time, the method, the path, the status code and text, the duration in milliseconds, the size, one extra request header and an optional body. The median, the error count, the slowest call, the bar widths and the cURL command are all derived from that list, so none of them is typed twice. The host is one constant, HOST.
What does Copy as cURL copy?
A single-line command built by curlOf from the method, the host and path, every request header and the body, if the call has one. A header that holds a variable, like the authorization token, is wrapped in double quotes so your shell fills it in from $PALLETRY_TOKEN; the block never holds a real token. The button is the catalog Copy Button: the browser does the copying, and if it refuses (no permission, or a page not served over HTTPS) the status line says so.
What stays in the page, and how do I use real requests?
Everything but the clipboard. The open row is local state and nothing is sent: the requests are a typed list. To show real traffic, build the same Call objects from your own capture (a HAR file has all of these fields), keep the milliseconds as numbers and let the helpers derive the rest.
Why does the panel not change height when I open a row?
Every call has four request headers and three response headers, so every panel is the same height, and an unseen copy of the list with the tallest panel open sits in the same grid cell as the live one. The row you open grows into room that is already reserved.
Is it accessible?
The requests are an ordered list. Each row is a button with aria-expanded and its text as its name; closed panels are hidden from the keyboard and from screen readers. State is never colour: the status is a glyph and a word, the method is a word, and the duration bar is decoration beside a number. The cURL command is a labelled region you can focus and scroll. The status line is a polite live region that is there from load.