About
A wrapper for a list item or table row that collapses it in place into a label with an Undo button when removed, then commits the removal after an undo window expires.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Undoable to your project and fits it to your theme.
Code
How Undoable is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import { Undoable } from "@/components/ui/undoable";
export default function UndoableDemo() {
const [items, setItems] = React.useState([
"Design review",
"Update dependencies",
"Write release notes",
]);
return (
<div className="flex w-full max-w-sm flex-col gap-2">
{items.map((item) => (
<Undoable
key={item}
label={`${item} deleted`}
onConfirm={() =>
setItems((current) => current.filter((i) => i !== item))
}
className="flex items-center justify-between gap-2 rounded-lg border px-3 py-2"
>
{({ remove }) => (
<>
<span className="text-sm">{item}</span>
<button
type="button"
onClick={remove}
className="text-sm text-muted-foreground hover:text-foreground"
>
Delete
</button>
</>
)}
</Undoable>
))}
</div>
);
}
Dependencies
More by aidankmcalister
View all
Confirm Switch
1
Consequences List
Confirmation Hook
Confirm Button
Type to Confirm