Paper Crumple

Deleting a note scrunches it into a paper ball that arcs into a bin, whose lid flips open and wobbles shut. Undo tosses it back out and smooths it flat.

Grocery list

Oat milk, lemons, basil, the good sourdough, something for Sunday.

Open

title

body

undoDuration5000

color

Installation

npx shadcn@latest add @glint-ui/paper-crumple

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/paper-crumple.json

Usage

import { PaperCrumple } from "@/components/ui/paper-crumple";

<PaperCrumple
  title="Grocery list"
  body="Oat milk, lemons, basil…"
  onDelete={() => removeNote(id)}
/>

Props

Prop	Type	Default	Description
title	string	"Grocery list"	Note title.
body	string	"Oat milk, lemons, basil, the good sourdough, something for Sunday."	Note text.
undoDuration	number	5000	Ms the Undo button stays available.
color	string	"#f87171"	Undo accent color.
onDelete	ReactNode	—	Called when the undo window closes and the delete is final.
onUndo	ReactNode	—	Called when the note is restored.
className	string	—	Extra classes for the root element.