shadcn.io is not affiliated with official shadcn/ui
API Keys CRUD Block for Svelte
A payments API's key list in a native table that shows only each key's prefix, with a New key popover, click-to-rename names, a hold-to-revoke button that leaves a struck row on record, and a confirmed Clear revoked with Undo.
Installation
Overview
Manage the keys your servers use to call an API, with this API key list for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar with a Switch that hides revoked keys and a Clear revoked button, then a native table of seven keys inside a frame of fixed height that scrolls inside itself. Each row shows the key's name, only its prefix such as kh_demo_9f2a (the secret is never shown), its scope, when it was created and when it was last used. The header's New key button opens a Popover with a name (required, unique) and a scope in a Native Select; the key lands at the head of the list marked New, and its scope is fixed from then on. A name is an Editable: click it, Enter saves and Escape cancels, and an empty or duplicate name is refused with its reason under the field. Revoking is a hold, not a click: a Long Press Button fills for one second, then the row stays on record as a struck, dated Revoked row that nothing can undo. Clear revoked asks first in an Alert Dialog and leaves an Undo in the foot. Create is the only Shine Button, and emptying the list shows an Empty state without the frame changing height. For developer dashboards, admin consoles and any list of credentials.
FAQ
How do I fill it with my keys?
Edit KEYS. Each has an id, a name, a prefix, a scope of Read, Write or Full access, ISO created and lastUsed dates (empty for never used) and a revoked date (empty while the key is live). The counts, the idle sentence and the dates in the table are all derived from that list. New keys take their id and prefix from a counter held in state, never from the clock.
Where is the secret, and can it be revealed?
Nowhere: this list only ever holds and shows a prefix, because a real dashboard keeps the secret out of the list after creation. If your product shows a key once at creation, do that in the dialog that creates it (see the API key dialog block) and keep this table to prefixes.
Why does revoking need a hold, and can I undo it?
A stray click should not kill a production key, so the button only confirms after a one-second hold (the keyboard works too: hold Enter or Space). Revocation is permanent, so there is no Undo for it: the row stays as a struck, dated record instead. Only Clear revoked, which removes those rows from the list, can be undone, and only once.
What is checked when I rename or create a key?
The name must not be empty, must be at most 32 characters and must not match another key's name, ignoring case, revoked keys included. A refused rename keeps the saved name and says why in the polite line and under the field, in a slot that is always there so the row never changes height.
What stays local, and how do I wire a real backend?
The keys live in React state in this tab and a reload brings the original seven back; nothing is created, revoked or sent. In your app call your API from create, rename, revoke and clearNow, update the list from the response, and show a refusal from the server in the same reason slot. Return the secret from the create call only, and show it in the creating dialog.
How does it look on a phone?
The table drops its Scope, Created and Last used columns by name and folds the scope and the last use into a line under the name, so a row is a name, a prefix and the hold button. The toolbar wraps, New key sits under the sentence, and the frame still scrolls inside itself.