A toast you flick sideways to dismiss. It resists with a rubber band, flies off past a threshold and carries an undo chip. Escape and the arrow keys dismiss it too.
Priya Raman
Signed the vendor agreement
Tomas Berg
Can we move standup to 10?
Conversation archived
Swipe it away, or undo
npx shadcn@latest add https://hyperblur.dev/r/micro-swipe-toast.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-swipe-toast.tsx.
import { MicroSwipeToast } from "@/components/hyperblur/micro-swipe-toast"
<MicroSwipeToast title="Invoice archived" description="Moved to Finance" onUndo={() => restore()} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Conversation archived" | Main message. |
| description | ReactNode | Optional second line in muted text. | |
| undoLabel | string | "Undo" | Text of the undo chip. |
| open | boolean | Controlled visibility. Pair with onOpenChange. | |
| defaultOpen | boolean | true | Initial visibility when uncontrolled. |
| duration | number | 0 | Milliseconds before the toast dismisses itself. 0 keeps it until dismissed. A countdown bar shows when set. |
| accent | string | "#2f7bff" | Icon, chip and countdown bar color. |
| idle | boolean | true | Nudge the toast sideways now and then until the pointer or focus arrives. |
| onOpenChange | (open: boolean) => void | Called with false once the toast has left. | |
| onUndo | () => void | Called when the undo chip is pressed. | |
| onDismiss | (reason: "left" | "right" | "undo" | "keyboard" | "timeout") => void | Called after the toast is gone, with the way it was dismissed. |