# Danger Zone

> The danger zone at the foot of workspace settings: outlined actions that only turn red on hover. Transfer ownership opens in place with a member picker, Archive makes the workspace read-only with a banner and flips to Unarchive, and Delete opens an alert dialog that lists what goes with counts, offers an export, and stays locked until the name is typed. It can't be dismissed mid-delete.

- Slug: `danger-zone`
- Category: [Settings](https://www.assembli.design/category/settings.md)
- Type: component
- Tags: settings, danger-zone, delete, archive, transfer, destructive, confirm, workspace
- npm dependencies: @base-ui/react, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/danger-zone
- Page: https://www.assembli.design/components/danger-zone

![Danger Zone preview](https://www.assembli.design/thumbnails/danger-zone-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `workspace` (required) | `string` |  | The workspace's display name, used in the copy. |
| `confirmText` | `string` | `workspace` | What the person must type to delete. Defaults to the workspace name. |
| `members` | `DangerZoneMember[]` | `[]` | People who can take ownership. The Transfer row shows when this and `onTransfer` are set. |
| `onTransfer` | `(member: DangerZoneMember) => Promise<void> \| void` |  |  |
| `archived` | `boolean` |  |  |
| `defaultArchived` | `boolean` | `false` |  |
| `onArchivedChange` | `(archived: boolean) => Promise<void> \| void` |  | Archive (true) or unarchive (false). May be async. The Archive row shows when set. |
| `onDelete` | `() => Promise<void> \| void` |  | May be async; the dialog stays open and can't be dismissed until it settles. A rejection shows an error. |
| `onExport` | `() => void` |  | Offered in the delete dialog as a last chance to take a copy. |
| `consequences` | `DangerZoneConsequence[]` | `[]` |  |
| `container` | `HTMLElement \| React.RefObject<HTMLElement \| null> \| null` |  | Where the delete dialog portals to. Pass a positioned element to keep it inside a frame. |
| `title` | `React.ReactNode` | `"Danger zone"` |  |
| `description` | `React.ReactNode` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/danger-zone/danger-zone.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/danger-zone
```

Registry item JSON: https://www.assembli.design/r/danger-zone.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.