Shredder

Delete a document card and it feeds into a rattling shredder, coming out as strips that scatter and fall, with an undo that drops it back in.

Q3-forecast.pdf

2.4 MB · edited 3h ago

Open

title

subtitle

strips12

undoTimeout5000

Installation

npx shadcn@latest add @glint-ui/shredder

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/shredder.json

Usage

import { Shredder } from "@/components/ui/shredder";

<Shredder
  title={file.name}
  onDelete={() => hide(file.id)}
  onUndo={() => show(file.id)}
  onExpire={() => deleteForever(file.id)}
/>

Props

Prop	Type	Default	Description
title	string	"Q3-forecast.pdf"	Document name.
subtitle	string	"2.4 MB · edited 3h ago"	Line under the title.
strips	number	12	Number of strips.
undoTimeout	number	5000	Ms undo stays available; 0 keeps it forever.
children	ReactNode	—	Custom card body.
onDelete	ReactNode	—	Called when the card is shredded.
onUndo	ReactNode	—	Called when undo restores it.
onExpire	ReactNode	—	Called when the undo window closes: delete for real here.
className	string	—	Extra classes for the root element.