React Alert Dialog - Destructive with Item Count
A destructive alert dialog displaying item count in title and button for bulk deletion awareness
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Deleting one thing feels different than deleting 24 things. This React alert dialog puts the count front and center—in the title, description, and Delete button—to make bulk deletion scope unmistakable. Built with shadcn/ui and Radix UI with a red-tinted warning card, the repeated numbers force acknowledgment of scale. Perfect for bulk deletions, batch operations, or any multi-item destructive action where magnitude awareness prevents whoops-deleted-everything mistakes.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-destructive-7.jsonRelated patterns you will also like
Simple Delete
Single item destructive confirmation
Destructive with Consequences
Bulleted list of impacts
Destructive with Warning Badge
Badge warning for permanence
Simple Confirmation
Non-destructive confirmation pattern
Table Bulk Actions
Bulk selection and action patterns
Destructive with Checkbox
Checkbox confirmation requirement