Stacked notifications that slide in, pause on hover and dismiss by button, swipe or timeout.
npx shadcn@latest add https://hyperblur.dev/r/toast-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/toast-stack.tsx.
import { ToastProvider } from "@/components/hyperblur/toast-stack"
const { toast } = useToast(); toast({ title: "Saved", description: "Changes are live.", variant: "success" })| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | App content that can call useToast(). | |
| position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Corner where toasts stack. |
| max | number | 3 | Most toasts visible at once. The oldest leaves first. |
| duration | number | 4000 | Milliseconds before auto-dismiss. 0 keeps toasts until closed. Pauses on hover and focus. |
| color | string | "#2f7bff" | Accent for the default variant. |
| inline | boolean | false | Position the stack absolutely inside the nearest relative parent instead of the window. |