Browse components
Swipe Toast
Stacked toasts that fan out on hover, pause their progress timers while you read, and fling away when swiped sideways.
Installation
npx shadcn@latest add @glint-ui/swipe-toastFirst 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/swipe-toast.json
Usage
import { SwipeToast } from "@/components/ui/swipe-toast";
const { toasts, push, dismiss } = useSwipeToast();
<button onClick={() => push({ title: "Saved", tone: "success" })}>Save</button>
<SwipeToast toasts={toasts} onDismiss={dismiss} position="bottom-right" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Corner the stack is anchored to. |
| strategy | "absolute" | "fixed" | "absolute" | absolute stays inside the nearest positioned parent; fixed uses the viewport. |
| duration | number | 5000 | Ms before auto-dismiss. 0 = until swiped. |
| visible | number | 3 | Toasts peeking out of the collapsed stack. |
| gap | number | 10 | Px between toasts when expanded. |
| toasts | ReactNode | — | Array of { id, title, description?, tone? }. useSwipeToast() manages one for you. |
| onDismiss | ReactNode | — | Called with the id when a toast is swiped, closed or times out. |
| className | string | — | Extra classes for the root element. |