# API keys manager

> Create scoped live/test keys, reveal once, copy, and revoke with confirmation.

Block · Pro · https://lodeui.com/blocks/api-keys-manager

## When to use

- Developer settings in any API product.

## When not to use

- OAuth apps: those need client id and secret flows.

## Installation

```bash
npx shadcn@latest add @lode/api-keys-manager
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ApiKeysManager } from "@/components/blocks/api-keys-manager";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ApiKeysManager />
    </main>
  );
}
```

Built from: Badge, Button, Checkbox, Dialog, Input, Select

## API reference

### ApiKeysManager

Create scoped live and test keys, reveal once with copy, and revoke with confirmation. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through keys and buttons |
| Esc | Close the create or revoke dialog |

## Accessibility

- Dialogs trap focus; scopes are labelled checkboxes.
- Copy announces success.

## Motion

- New keys slide into the list; revoked keys collapse out.

## Responsive behavior

- Key rows become two lines below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate and hash keys on the server; show the secret only in the create response.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Environment variables](https://lodeui.com/blocks/env-variables) — Project env vars with masking, scopes, .env paste, dirty state and save.