Pro

Dust remove

Removes an item by turning it to dust: the row breaks into small grains that drift up and away from one side to the other, then the space it held closes. The grains are copies of the row, so it needs no canvas or screenshot.

Pro

pnpm dlx shadcn@latest add @caliper/dust-remove

Notifications

Clear one and it turns to dust.

Priya Raman commented on Q3 forecast2m ago
Deploy bot production is live (v4.12.0)14m ago
Jonas Weber assigned you CAL-2121h ago
Billing October invoice is ready3h ago

Installs components/ui/dust-remove.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

Deleting a message, notification or card where the removal should feel final.
Clearing a single item in a list people watch.

Skip it when

Bulk deletes; dozens of rows breaking at once is noise.
Removals people may want back without an undo nearby.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Keep it until it is gone: Set removed, keep the item in your list, and drop it in onRemoved, which fires after the dust and after the space has closed.
A sweep: Grains leave left to right with scatter, rising and drifting the way they go, so the row reads as blown away rather than exploding.
Said once: Pass announce and it is said politely as the removal starts; under reduced motion the row fades and closes.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/dust-remove

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { DustRemove } from "@/components/ui/dust-remove"

The worked example comes with Pro

The 65-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

DustRemove

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

removedbooleanfalseSet true to break the content into dust; `onRemoved` fires once it has gone and the space has closed.

onRemoved(() => void)—

announcestring—Said politely to assistive technology as the removal starts, e.g. "Message deleted".

grainnumber9Size of a grain in px. Smaller is finer and costs more.

It is built on native elements, so roles and focus come from the browser. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.