Undo rewind

Pro

The bar that follows a destructive action: what happened, an Undo button and a ring that drains over the time you have left. Ctrl or Cmd Z undoes it too.

Installs components/ui/undo-rewind.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/undo-rewind

INV-0417
Halden Analytics
$4,280.00
INV-0415
Lumen Labs
$918.00
INV-0416
Ostra Freight
$12,960.50
INV-0414
Northwind Studio
$7,125.00

When to use #

Use it for

Deleting rows, moving items and bulk edits that you can safely delay.
Anywhere a confirm dialog would add friction to a common action.

Skip it when

Actions that cannot be delayed or reversed; confirm those first with an alert dialog.
Several overlapping undos; offer one at a time.

Decisions #

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

Behaviour

It only offers the undo: You remove the row on delete, put it back in onUndo and finish the delete in onExpire. The bar owns the time, the key and the announcement, not your data.
The key never fights typing: Ctrl or Cmd Z undoes the action unless focus is in a field, where it keeps undoing text.

Styling

The ring says how long, the number says it too: The ring drains anticlockwise; under reduced motion it holds still and the countdown number carries the time.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/undo-rewind

Adds its 5 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 { UndoRewind } from "@/components/ui/undo-rewind"

The worked example comes with Pro

The 53-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

UndoRewind

component

PropTypeDefaultDescription

onUndo *(id: string | number) => void—

onExpire((id: string | number) => void)—

pending *UndoPending | null—The action that can be undone, or null when there is none. A new id restarts the countdown.

durationnumber6000How long Undo stays available, in milliseconds.

labelstring"Undo"

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.