shadcn.io is not affiliated with official shadcn/ui
API Keys Carousel Block for Ark UI
Nine API keys for a key vault in a vertical track of four rows, each with a scope word and weight, a masked key, dates and a status, a Reveal toggle that shows a longer prefix and the fingerprint, a Copy button and Revoke with Undo.
Installation
Overview
Keep a key list to one short window, with this API keys carousel for React with Ark UI. Keywren, a key vault, lists nine keys in a ruled panel: a counts band ("7 active, 2 revoked"), a column head and a vertical track that shows four rows and moves one row at a time. Each row has the key's name, a scope as a word with a three-dot weight (Read, Write or Admin), the key masked as a prefix and its last four characters, the created and last-used dates, a status word, a Reveal Toggle, a Copy Button and Revoke. Reveal never shows a whole key: it shows a longer prefix and states the key's fingerprint in the foot, and Copy puts that fingerprint on the clipboard. Revoke marks the row "Revoked" in place and turns into Undo, so no row moves. Up and Down buttons and the arrow keys move the track, and the foot says which keys are in view. On a phone the dates fold into the first cell. The ruled bands come from Guides. It is built from Carousel, Toggle, Copy Button, Button and Guides, with CSS transitions only. The keys and dates are made up.
FAQ
How do I use my own keys?
Edit KEYS. Each has an id, a name, a scope (Read, Write or Admin), a prefix, the head characters shown on Reveal, the last four in tail, a print fingerprint, a created date and a used date (an empty string means never). The counts, the dots and the masked text are derived from them. Show only what is safe to show: the block never holds a whole secret, and your API should not send one after creation.
How does it work with a keyboard?
Tab reaches Reveal, Copy and Revoke on the four rows in view, then Up and Down. With focus inside the track the arrow keys move one row and Home and End jump to the first and last window. Rows out of view are hidden from the tab order and from screen readers, and Up and Down are marked unavailable at the ends instead of disabled, so focus stays put.
How is the vertical track built?
The track has a fixed height and shows four rows, so the panel never changes size when the window moves.
Ark's Carousel runs with orientation="vertical", slidesPerPage 4 and slidesPerMove 1, and the block controls the page.
What is announced?
The foot is the block's one polite live region. It reads "Keys 1–4 of 9" after the track moves and the result of an action after one ("Production server: fingerprint 3f9a c107 5be2 91d4", "Billing sync revoked, in this demo. Nothing was sent.").
What stays local in the demo?
Everything. Reveal, Copy and Revoke only change this page's state, nothing is sent, and the keys are made up. To wire it for real, load the keys from your API, call your revoke endpoint from the Revoke handler, and keep the rule that a full secret is shown once at creation and never again.