Bollard UI

Implementation guide

Confirm a dangerous delete action in React

Replace a vague “Are you sure?” dialog with a typed confirmation that makes the target and consequence explicit before deletion.

The mistake this stops

A destructive action is approved on autopilot because the dialog hides what will be deleted.

A deliberate confirmation step that states the exact action while preserving keyboard and screen-reader access.

Read the Type to Confirm component docs for its live preview, API, accessibility notes, dependencies, and limitations.

Install the component

pnpm dlx shadcn@latest add https://bollard-ui.vercel.app/r/type-to-confirm.json

Use it safely

  1. Install the confirmation component near the destructive action.
  2. Require the person to type a meaningful target or phrase before enabling deletion.
  3. Authorize and execute deletion on the server only after confirming the caller and target.