shadcn.io is not affiliated with official shadcn/ui
API Request Log Table Block for Svelte
An API request log with a query-token filter bar: type status:5xx method:POST /orders, press Enter and each token becomes a removable chip that filters the requests live, with a cURL copy button on every row.
Installation
Overview
Filter a request log by typing what you mean, with this API request log for Svelte with Ark UI. A compact header names the log. Inside a hairline frame with a plus mark on each corner, the first band is a search field with a / Kbd hint that understands tokens. Typing status:5xx method:POST /orders and pressing Enter turns each token into a removable chip and filters the twelve requests live ("Showing 2 of 12"). Status takes a code or a class such as 5xx, method an HTTP verb, and a word that starts with a slash is a path; chips of different kinds narrow the list and chips of one kind widen it. A token it does not understand, such as stat:, stays in the field with a message under it that says what is accepted. Each row, with its time, method, path, status and latency, has a button that copies the request as a cURL command. The table sits in a fixed-height region with a sticky head and an empty state with a Clear filters button. On a phone Latency goes and Copy stays. It's built from Input Group, Kbd, Badge, Empty and Guides. For gateway logs, request inspectors and any log that people search by field.
FAQ
Which tokens does the bar understand?
status: with a three-digit code (status:404) or a class (status:5xx), method: with GET, POST, PUT, PATCH or DELETE in any case, and a path that starts with a slash (/orders), which matches every path that begins with it. parseToken reads one token and returns a chip or a problem, so adding a kind such as latency: means one more branch and one more case in showing.
What happens to a token it cannot read?
It stays in the field and a message under the field says what was wrong and what is accepted ("“stat:” is not a filter. Use status:404 or status:5xx, method:POST, or a path such as /orders."). The tokens next to it that were valid still become chips. The message has a reserved line, so it never moves the table, and the field is marked invalid for assistive technology while it shows.
Which keys does the field take?
Enter commits the tokens, Backspace in an empty field removes the last chip, Escape clears the text, and / focuses the field when focus is elsewhere inside the block and you are not typing. Each chip also has its own button, named for its filter ("Remove filter status:5xx"). The / listener is on the block, not on the page, so it never takes the key from the rest of your app.
Does the cURL button really copy?
Yes, it writes curl -X POST 'https://api.apiloom.example/orders' for the row to the clipboard and the status line says what was copied; if the browser refuses, it says it could not. The host is a placeholder, and nothing is requested. For real logs, build the command from the logged URL, method and any headers you are willing to expose.