## Danger Zone (S—326)

Destructive settings done with care: transfer, archive and delete, each explains its impact; delete needs typing.

- URL: https://sundaeui.dev/components/danger-zone
- Category: Forms & inputs · 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/danger-zone.json`
- Tags: admin, destructive, settings, delete, danger-zone, confirmation

Each action is a row that expands into what will happen and what cannot be undone. Delete needs the project name typed exactly; the button stays disabled until it matches.
Archive is reversible and says so, so the heavy confirmation is saved for the action that needs it.

### Usage

```tsx
import { DangerZone } from '@/components/sundae/danger-zone'

<DangerZone />
```

### Props

- `name` (`string`, required): Resource name to type.
- `onDelete` (`() => void`): Called on confirmed delete.
- `onArchive` (`() => void`): Called on archive.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Project, workspace and account settings.

### When not to use

- Undoable actions: use a toast with Undo.

### Accessibility

- Rows are disclosure buttons; the delete field is labelled with the exact phrase.
- Outcomes are announced.
- Reduced motion removes the movement and keeps every state change.