108 Pro components and page blocks

Get Pro
uibrik

Updated

Black Hole Delete

Pro

Preview

Customize

Color
Duration1.10s
Stagger0.09s
Particles160
Swirl2.4
Width380px

Installation

Pro

Black Hole Delete is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/black-hole-delete

Usage

import { BlackHoleDelete } from "@/components/uibrik/black-hole-delete/black-hole-delete";​const defaultItems = [  {    id: "1",    name: "Board update.key",    meta: "Keynote · 24.8 MB",    kind: "slides",  },  { id: "2", name: "Invoice 1042.pdf", meta: "PDF · 312 KB", kind: "pdf" },  // …3 more];​<BlackHoleDelete  color="#ff8a3d"  duration={1.1}  stagger={0.09}  particles={160}  spin={2.4}  undo  undoSwirl={false}  width={380}  defaultItems={defaultItems}  onItemsChange={(items) => {}}  onDelete={(deleted) => {}}  // items={[…]}/>

Props

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