Bulk Delete
Freev1.0.0Select rows, then confirm exactly what gets deleted right in the header, with undo.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { BulkDelete } from "@/components/ui/notchset/bulk-delete";
type File = { id: string; name: string; owner: string; size: string; mb: number };
export function AlbumFiles({ files, trash, restore }: { files: File[]; trash: (ids: string[]) => Promise<void>; restore: (ids: string[]) => void }) {
return (
<BulkDelete
title="Braies shoot"
items={files.map((f) => ({ id: f.id, name: f.name, meta: f.owner.toUpperCase(), size: f.size, mb: f.mb }))}
onDelete={trash}
onUndo={restore}
/>
);
}Props
title / items–string / { id, name, meta, size, mb, thumb? }[]The list and its rows; thumb is an image URL, or "doc" / "sheet" for an icon tile.
selected / defaultSelected / onSelectedChange–string[]Controlled or uncontrolled selection.
onDelete–(ids) => PromiseDeletes the ids. Reject with an Error to show its message and keep the selection.
undoMs / onUndo–number / (ids) => voidHow long Undo stays (default 5000) and what it restores.
empty–ReactNodeShown when every row is gone.
Anatomy
- The Notchset instrument parts: scanner, rolling number and glyph flip.
- Native buttons and a listbox; one file serves both builds.
- Plays signal, confirm, done and tick through beautiful-ui-sound.
BulkDeletedata-slot="bulk-delete"The card: header, delete control and rows.
Controldata-slot="bulk-delete-control"DELETE, then the question, the progress, the result and Undo.
Source
components/ui/notchset/bulk-delete.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/bulk-delete.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/bulk-delete.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/bulk-delete.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Deleting a selection in a file list, an album or a table, right where the button sits
- Deletes that should offer Undo in place
Use something else when
- A single destructive action: use Button with confirm, or Confirm Button (hold)
- Consequences that need a paragraph or typing a name: use an Alert Dialog
Mistakes to avoid
- Do the final delete when Undo expires, or make onDelete reversible
- Reject with a short reason: it's shown in the header
Agents find it by
- bulk delete, delete selected, confirm delete, file list, album, undo delete, inline confirmation, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/bulk-delete.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ ↓
- Move between rows
- Space / Enter
- Select a row
- Delete / Backspace
- Ask to delete the selection
- Esc
- Cancel the question
Accessibility
- Rows are options in a multi-select listbox; select-all is a tri-state checkbox
- Opening the confirmation moves focus to CANCEL; Esc cancels; the selection is locked while it asks
- The question, the progress, the result and a failure are announced in the header's status
Motion
- Ask
- The delete control unrolls across the header (460ms) and the title fades
- Delete
- The scanner runs; rows fade and slide 16px, 70ms apart, then fold away (380ms)
- Undo
- Five dots count down a second each; the rows grow back, still selected
- Fail
- The card shakes ±5px (360ms); rows that weren't deleted get a signal bar
Responsive
- 480px wide by default; on narrow screens the question truncates before the buttons.
Performance
- Plain DOM; rows fold with grid-template-rows transitions.
Changelog
v1.0.0 · 2026-10-03
First release
