A key on a well with reveal and copy. Copied confirms for 2 s and Revoked removes the actions.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/api-keyPlaygroundProduction serverLive
••••••••••••0001TestLocal developmentTest
••••••••••••0002RevokedProduction serverRevoked
••••••••••••0001Icons animation
Revoked
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/api-key
Test
environment sets the badge, so a test key never reads as live.
••••••••••••0002Revoked
Motion
Accessibility
- The full key stays out of the DOM until revealed or copied.
- Reveal is a toggle button with aria-pressed.
- Copied is a status message.
Motion
- The card fades in and rises 8 px over 400 ms.
- Copied fades in over 150 ms and clears after 2 s.
- With reduced motion, both appear in place.
Responsive behavior
- 560 wide on Web and 358 on Mobile.
Performance
- The enter animation is CSS, and Copied swaps in with one short fade.
- The Copied timer is cleared on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ApiKey from @/components/fetaui/api-key. It composes Button and Icon Button with Tag from data-kit.
- The DOM holds only the mask until reveal or copy, but value is still a client prop. Send a key to the browser only if that person may see it.
- The mask keeps the text up to the first underscore after the third character, plus the last four characters.
- Roll key only calls onRoll, so pass the new value yourself. revoked removes reveal, copy and Roll key.
Related
WebhooksComponentEndpoints with health, a delivery histogram, recent deliveries with Retry, and an open delivery with its payload.EndpointComponentA method Badge in a fixed column, a mono path and a one line summary.Webhook TesterProBlockSend a signed test event, check the JSON, and follow signed, sent and response steps.Request LogComponentOne request in mono, and a windowed list for live tails of any length.