shadcn.io is not affiliated with official shadcn/ui
API Key Chip Developer Portal Navbar Block for Svelte
A developer-portal bar with a masked API key chip: a Reveal toggle that shows the key for ten seconds and puts the mask back by itself, and a copy button, between the docs links and a Get a key button.
Installation
Overview
A masked API key for Svelte with Ark UI, in the bar of an API platform called Keystack. One bar between the page's rails, cut into cells by solid dividers that meet the top rule: the wordmark, Docs, API reference, SDKs and Status (from xl), the key cell, then Dashboard and one Shine Button. The key cell holds a "Live" badge and the key in monospace, masked to its first eight and last four characters. A Reveal toggle shows the whole key and puts the mask back by itself after ten seconds, saying so in a polite line, or at once when you press it again; the copy button copies the whole key either way and says "API key copied". The key sits over an unseen copy of both forms, so the bar never changes width. On a phone a menu button opens a sheet from the top with the links, the same chip and the actions. It's built from Toggle, Copy Button, Badge, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For developer sites where the key should be one click away and never left on screen. The key is made up.
FAQ
How do I use my own key, and what does Copy copy?
Set KEY at the top of the file; the mask (MASKED) and the "ending in" text are derived from it. In an app, pass the key from your session instead. Copy always puts the whole key on the clipboard, masked or not, because the mask only changes what is drawn; the button's label says "Copy API key" and the result is announced. The key here is invented and does nothing.
How does the ten-second re-mask work?
Pressing Reveal sets the key as shown and starts one timer of SHOWN_MS (ten seconds); when it ends, the mask returns and a polite line says "Key hidden." Pressing the toggle again hides it at once and cancels the timer. There is no countdown to read and nothing else in the bar moves; change SHOWN_MS for another delay. The timer is a security measure, so it is not extended by hovering or focus.
How does it work with a keyboard and a screen reader?
The links sit in a nav named Main with the current page marked. The toggle is a button named "Reveal key" that reports whether it is pressed; while the key is masked it is read as "API key ending in 4f2a" (the dots are drawing), and when shown the key is read out as text. The announcements ("Key shown for 10 seconds.", "Key hidden.") come from a polite status that is present from load. The copy button reports success or failure through its own live text.
How does it work on a phone?
Below the xl breakpoint a menu button opens a sheet from the top with the links, the key chip (the key on its own line, the toggle and copy beneath it) and Dashboard; the chip leaves the bar below lg. The bar keeps the wordmark's icon and "Get a key"; nothing wraps at 320 pixels. Revealing inside the sheet works the same and the timer keeps running if you close it. Escape closes the sheet and focus goes back to the menu button.