React API Keys Manager
A table of API secrets — the anatomy of a B2B settings screen: masked keys with reveal and copy, scope badges, created / last-used timestamps, and revoke. Reveal, copy, and revoke are handled internally; wire onRevoke and onCreate to your API.
API keys
| Name | Key | Created | Last used | |
|---|---|---|---|---|
Production readwritedeploy | sk_live_••••••••••H5jL | 2026-03-14 | 2026-07-20 08:12 | |
CI pipeline readdeploy | sk_ci_D8••••••••••L0aG | 2026-05-02 | 2026-07-19 22:41 | |
Local dev read | sk_test_••••••••••S0tU | 2026-06-28 | Never |
Installation
npx shadcn@latest add "https://kelvinui.com/registry/api-keys.json"
Props
| Prop | Type | Description |
|---|---|---|
| keys | ApiKey[] | { id, name, key, scopes, created, lastUsed? } |
| title | string | Header title (default "API keys") |
| onRevoke | (id: string) => void | Fires when a key is revoked |
| onCreate | () => void | Shows a "Create key" button when set |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.