API keysPro
API key management where Create key unfolds into its form and each secret is shown once.
API keys
Secret keys sign requests from your servers to the Halden API. Keep them out of browsers and source control.
- The developer settings page of an API product.
- Key management with scopes, environments, and a one-time secret reveal.
- Revoking keys where a stray click must not fire.
- Use webhooks for event endpoints and signing secrets.
- Use integrations for OAuth connections to other apps.
- Use roles-permissions for user access.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ApiKeys } from 'animui/api-keys';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this on the developer settings page of an API product. Create keys on your server, pass the one-time secret to the reveal step, and connect Hold to revoke to your key revocation endpoint; every key in the preview is simulated.
import { ApiKeys } from "animui/api-keys"; export default function DeveloperSettings() { return ( <main> <ApiKeys /> </main> );}ApiKeys
API key management where Create key unfolds into a form with scopes and environment, each new secret is shown once, and keys revoke with hold to confirm. Keys and secrets are simulated.
No props.
- Escape
- Closes the create key form and returns focus to its button.
- Each key opens a labelled role="region" detail panel.
- Revoke uses hold to confirm, so it cannot fire from a stray click.
- Creation, copy, and revoke results are announced in a polite status region.
- The Create key button unfolds into its form, and new keys slide into the list.
- Reduced motion replaces the unfold with an instant swap.
- Below 700px container width key rows stack scopes and dates under the name; below 540px detail facts go single column.
- The create form drops to one column below 560px of its own width.
- Key rows are not virtualized, which suits the handful of keys most accounts have.
- A ResizeObserver drives the create button's unfold into the form.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on the developer settings page of an API product.
- Create keys on your server and pass the one-time secret to the reveal step; never store it client side.
- Connect hold to revoke to your revocation endpoint. Composes animui hold-to-confirm, copy-button, input, segmented-control, checkbox, badge, avatar, and button.
The full library index for assistants is at /llms.txt.