shadcn.io is not affiliated with official shadcn/ui
API Keys Account Block for Radix UI
Roll a Test or Live secret key without downtime: a dialog picks how long the old key keeps working, shows the new key once with a copy button and rolls only after you tick that you copied it.
Installation
Overview
Let people replace a secret key without taking their servers down, with this key rolling panel for React with Radix UI. A hairline frame with a plus mark on each corner holds two rows, a Test key and a Live key: each shows the key masked in mono (sk_live_••••c41e), when it was made and last used, and a line about the older key that is still working. Roll key opens a Dialog. In it a Segment Group asks how long the old key keeps working (not at all, 1 hour, 24 hours or 7 days) and the moment it stops is written out from one fixed time ("Old key stops 15 Oct, 09:30 UTC"); the new key is shown once in a read-only Input with a Copy Button; and the Shine Button Roll key stays unavailable until a Checkbox says "I have copied the new key". Rolling updates the row with the new masked key and says when the old one stops. It's built from Dialog, Segment Group, Checkbox, Copy Button, Input, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the developer settings of any API with secret keys.
FAQ
How do I fill it with my keys?
Edit KEYS: each has a mode (live or test), the last four characters as tail, the ISO created day and the moment it was last used. The choices in the dialog are GRACES (a label and a number of minutes), and every moment on the page, including "Old key stops 15 Oct, 09:30 UTC", is worked out from the one AS_OF constant, never the clock, so replace it with the current time when you wire it up.
What stays local, and how do I make it real?
Everything. The new key is a random string made in your browser when the dialog opens, and rolling swaps the mask in this page's state and says so. To make it real, ask your server to create the key in roll, show the secret it returns in the same field (it is returned once), and let the server end the old key at the time you chose: the page only writes the time down. Keep only a hash of the new key.
What does the overlap setting do?
It lets the old key keep working for a while so you can deploy the new one first. "Not at all" ends the old key at once; the others end it 1 hour, 24 hours or 7 days after the as-of moment, and the dialog writes the exact time under the choice. After rolling, the row says "The old key still works until 15 Oct, 09:30 UTC." The row keeps that line's space reserved, so it never moves when a key is rolled.
Why can't I press Roll key at first?
Because the new key is shown only once and rolling without copying it would lock the servers out. The button is marked unavailable but stays focusable: pressing it says "Copy the new key, then tick the box to roll." in the dialog. Ticking the box makes it roll. Cancel, Escape or the overlay close the dialog without changing anything and the new key is thrown away.
How do the dialog and focus behave?
The dialog is closed when the page loads and opens from the row's Roll key button, with a focus trap, Escape to close it and focus back on the button you used. Each row's button is named for its key ("Roll the live key"). The choice is a labelled group, the copy button announces "New key copied", and the problem line under the checkbox is a polite live region.
How does it look on a phone, and is it accessible?
The rows stack: the key, its facts and the older-key line first, then the Roll key button. The dialog scrolls inside the viewport and its four choices become two by two. The keys are a real list, the mask is read as text, the dates keep their order in a right-to-left page, and the status line at the foot is a polite live region present from the start.