DangerZone
Destructive action confirmation card with typed input verification
Preview
Delete Project
Permanently delete this project and all its data.
Usage
import { DangerZone } from "@/components/ui/danger-zone"
function SettingsPage() {
const handleDelete = async () => {
await deleteProject(projectId)
}
return (
<DangerZone
title="Delete Project"
description="Permanently delete this project and all associated tenders, documents, and data. This action cannot be undone."
confirmLabel="Delete Project"
entityName="My Project"
onConfirm={handleDelete}
isPending={isDeleting}
/>
)
}Renders a card with a destructive border. Clicking the button opens an AlertDialog that requires the user to type the entity name before the action is confirmed.
Install
npx shadcn add @bonsai/danger-zone