# API Keys Manager block

> API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows

API keys settings page: copy framework .env snippets, reveal, rotate, or revoke masked keys, plus a create-key dialog with scopes, owners, and expiration. ReUI Frame, Badge, Alert with Dialog, Combobox, Select, InputGroup.

- Type: Pro block
- Category: [Form](https://web.dev.reui.io/blocks/application/form.md)
- Page: https://web.dev.reui.io/blocks/application/form/form-8
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/field.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/field.md
- MCP: `get_block("form-8")`
- Built with: Alert, Avatar, Badge, Button, Button Group, Checkbox, Combobox, Dialog, Field, Frame, Input, Input Group, Item, Scroll Area, Select, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Masked keys to reveal, rotate or revoke under a copyable env snippet for 6 stacks, with a scoped create key Dialog

## Agent notes

- `INITIAL_API_KEYS` ships each full key `value` to the browser for Reveal, so return only `maskedValue` and fetch a secret on demand
- `handleCreateKey`, `handleRotate` and `handleConfirmRevoke` only change local `apiKeys` state, and `CreateKeyDialog` invents the key value in the browser
- Replace the `API_STACK_OPTIONS` snippets, whose names such as `REUI_SECRET_KEY` are placeholders, and `ACCESS_OWNERS` with your env names and team

## When not to use

- Developer tokens beside SDK samples in 5 languages, with Undo after a revoke: use [Developer API Keys](https://web.dev.reui.io/blocks/application/profile/profile-10.md) (`get_block("profile-10")`)
- Connected third party integrations in a sortable table with a switch on each row: use [API Integrations](https://web.dev.reui.io/blocks/application/settings/settings-14.md) (`get_block("settings-14")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt)

## Install

```bash
npx shadcn@latest add @reui/form-8
```

## About Form blocks

### When to use

- New record entry: an invoice with line items, a product, an app launch, an onboarding plan or a member invite
- Editing a record already on file, such as a user profile, a support ticket or a business verification
- Admin configuration pages for hosted checkout, sign-in methods and lockout rules, or API keys

### When not to use

- An account area that swaps team, notification and billing panels from a side rail or tabs: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- A list of toggles for notification channels, app integrations or workspace options: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- A create, invite or connect flow that opens over the current page in a modal: use the [Dialog blocks](https://web.dev.reui.io/blocks/application/dialog.md)

### Agent notes

- Each submit handler calls `preventDefault` and sends no request; post the values to your API from it
- Save feedback calls `toast` from `sonner`; mount the sonner Toaster once in your layout or no message shows
- Each block sets its own `min-h-svh` wrapper, padding and max width in page.tsx or its root component; drop them inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.