# Black Hole Delete

A file list where deleted items get sucked into the trash bin: its lid lifts, its mouth turns into a WebGL void, and items stretch and swirl in, shedding particles that heat up on the way.

- Page and source: https://uibrik.com/components/black-hole-delete
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/black-hole-delete`
- Packages: none beyond React
- Import: `import { BlackHoleDelete } from "@/components/uibrik/black-hole-delete/black-hole-delete"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| color | `string` | `"#ff8a3d"` | Colour of the rim round the bin's mouth and the heated debris. |
| duration | `number` | `1.1` | Time each item takes to fall in. |
| stagger | `number` | `0.09` | Delay between one item and the next. |
| particles | `number` | `160` | Particles shed by each item. |
| spin | `number` | `2.4` | How far items wind round the hole on the way in, in radians. |
| undo | `boolean` | `true` | Offer an Undo after deleting. |
| undoSwirl | `boolean` | `false` | Undo plays the delete backwards, items swirling back out of the bin. Off, rows fade back in. |
| width | `number` | `380` | Width of the list. |
| items | `BlackHoleItem[]` |  | Items to list (controlled). Pair with onItemsChange. |
| defaultItems | `BlackHoleItem[]` | `SAMPLE_FILES` | Items listed at the start when uncontrolled. |
| onItemsChange | `(items: BlackHoleItem[]) => void` |  | Called with the new list after a delete or an undo. |
| onDelete | `(deleted: BlackHoleItem[]) => void` |  | Called with the items that went into the black hole. |
| className | `string` |  | Classes for the card. |