Toast Stack
Notifications that stack like a deck, fan out on hover and flick away with a swipe.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Older toasts shrink and tuck behind the newest. Hover (or focus) fans them out so all are readable, auto-dismiss pauses while hovering, and you can swipe one sideways to dismiss it.
Installation
$ npx shadcn@latest add https://guetix.com/r/toast-stack.json
Uses the shadcn CLI. It creates components/guetix/toast-stack.tsx and installs nothing else.
Usage
example.tsx
import { ToastStack } from "@/components/guetix/toast-stack";
export default function Example() {
return <ToastStack />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 6000 | Auto-dismiss (ms, 0 = never). |
| demoControls | boolean | true | Show demo buttons. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- aria-live=polite list; every toast has a Dismiss button.