# Developer API Keys block

> Developer API keys page with masked token copy, roll and revoke, and 5 language SDK samples

Developer API keys page with masked tokens, roll and revoke on active keys, delete once revoked, confirm dialogs with undo toasts, and SDK samples in 5 languages. ReUI Badge and CodeBlock with shadcn Table, AlertDialog, DropdownMenu.

- Type: Pro block
- Category: [Profile](https://web.dev.reui.io/blocks/application/profile.md)
- Page: https://web.dev.reui.io/blocks/application/profile/profile-10
- MCP: `get_block("profile-10")`
- Built with: Alert Dialog, Avatar, Badge, Button, Card, Code Block, Dialog, Dropdown Menu, Empty, Field, Hover Card, Input, Radio Group, Scroll Area, Table, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An API key list with create, roll, revoke and delete in local state, Undo toasts, a Secret or Publishable choice and tabbed SDK samples

## Agent notes

- `handleCreate`, `handleRoll`, `handleRevoke` and `handleDelete` only change local `keys` state, so call your key API in each
- `tokenBody` builds the fake key value deterministically, so replace it with the secret your backend returns once at creation
- Replace the sample `API_KEYS` and the `SAMPLES` code for each of the 5 `LANGUAGES`, and keep Undo only if the API can restore a key

## When not to use

- Keys are revealed in place and copied as per stack env snippets: use [API Keys Manager](https://web.dev.reui.io/blocks/application/form/form-8.md) (`get_block("form-8")`)
- The integrations are managed in a data grid with status switches and a pause all toggle: 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)
- Shiki v4: [API reference](https://shiki.style/guide/install), [docs](https://shiki.style/guide/), through ReUI Code Block

## Install

```bash
npx shadcn@latest add @reui/profile-10
```

## About Profile blocks

### When to use

- Account areas that switch profile, workspace, team, billing or access panels from tabs or a sidebar
- A personal profile edit page: avatar, name, verified email, username, phone and regional preferences
- An account subpage for one job: sender mailboxes, alerts, referrals, meeting capture, billing or API keys

### When not to use

- One panel of switch rows or integration cards, with no personal identity fields: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- Entering a new record, such as an invoice with line items or a product listing: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- The outer navigation layout around every page of a product, beyond account pages: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)

### Agent notes

- Each page.tsx wraps `Profile` in its own padding and centering; render `Profile` alone inside your layout

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.