## API Key Row (S—140)

An API key row: masked by default, reveal with a press, copy with a tick, and roll the key behind an inline confirm.

- URL: https://sundaeui.dev/components/api-key-row
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/api-key-row.json`
- Tags: settings, secret, reveal, developer, api-key, copy

The key shows as a prefix and dots. Reveal swaps in the full key in a monospace well; copy writes it and flashes a tick. Roll asks inline, then replaces the key with a new one and notes when it was created.
Last-used time and scopes sit under the name so people can tell keys apart.

### Usage

```tsx
import { ApiKeyRow } from '@/components/sundae/api-key-row'

<ApiKeyRow />
```

### Props

- `name` (`string`, required): Key name.
- `secret` (`string`, required): The key.
- `lastUsed` (`string`): Human-readable last use.
- `onRoll` (`() => Promise<string>`): Returns a new key.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Developer settings, integrations, webhooks secrets.

### When not to use

- Showing a key once at creation: use a one-time reveal dialog.

### Accessibility

- Reveal is a toggle button with aria-pressed; copy and roll announce results politely.
- The masked key is labelled so screen readers do not read dots.
- Reduced motion removes the movement and keeps every state change.