Quack Toast
Transient messages that slide in from the corner. The queue is capped so a burst of events never buries the page.
FeedbackClient componentlucide-react
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/quack-toastPulls in @duck/theme, @duck/duck-spinner. Already installed items are skipped.
Usage
import { QuackToastProvider, useQuackToast } from "@/components/ui/quack-toast"The file lands in components/ui/quack-toast.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 3 | On QuackToastProvider: most toasts on screen at once. |
| toast | (options: ToastOptions) => void | - | From useQuackToast. Takes title, description, variant and duration. |
| quack | () => void | - | From useQuackToast. It quacks. |
| dismiss | (id: number) => void | - | From useQuackToast. |
Rules
What keeps this component from turning into noise.
- Toasts never steal focus. Anything the user must act on belongs inline, not in a toast.