API keys

Things to tryCopy Anchor Link

• Create a key. The card springs into a name form, and "Create key" travels down to become its submit button.
• Reveal the secret. Create turns the card into a dark panel where the secret decodes a character at a time.
• Copy it. The copy icon turns into a check.
• Press Done. The card springs back to the list, the secret slides into the newest row, and scrambles itself into its masked form.
• Revoke a key. Hover a row (or tab to it) and press Revoke. It turns into a red Confirm; press it and the row folds out of the list while the header says it's gone. Escape or tabbing away takes it back.

InstallCopy Anchor Link

npx shadcn@latest add https://your-docs-site/r/api-keys.json

DependenciesCopy Anchor Link

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motion

How it worksCopy Anchor Link

• One card, three faces. The list, the name form and the secret are faces of one card. It springs its real height between them and clips what's inside, so nothing is scaled; each face's parts blur and scale in from just below their size.
• Things that travel. "Create key" and the secret move with Motion's layoutId: the button into the form, the secret from the panel into its row.
• Decode and mask. Revealing and hiding the secret use the same scramble hook, run in opposite directions. The subtitle reshapes with Remold.Text to say what each step wants.
• Revoking asks in place. The first press only arms it: Revoke turns into a red Confirm. Once it's gone the row folds away by height, and the card follows it exactly.
• Built on Base UI. The Live and Test switch is Base UI's Toggle Group.