Toast
Toast notifications with a pausable countdown and promise states.
Toasts confirm what just happened without interrupting: saved, deployed, failed. Call toast() from anywhere. Cuelark toasts rise in, show a hairline countdown that pauses on hover and focus, take an action, follow a promise from loading to success, and slide away.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/toast.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/toast.
Builds on: motion
Usage
import { Toaster, toast } from "@/components/ui/toast";
// once, near the root
<Toaster />
// anywhere
toast.success("Saved", { description: "All changes synced." });Motion
Toasts rise in with a spring, the countdown hairline is a GSAP tween you can pause, and dismissal folds the toast away.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
toast(title, options)
Also toast.success · .error · .warning · .info · .promise · .dismiss(id).
| Prop | Type | Default | Description |
|---|---|---|---|
| description | ReactNode | — | Secondary text. |
| duration | number | 4500 | ms; Infinity keeps it open. |
| action | { label; onClick } | — | One inline action. |
| id | string | — | Update an existing toast. |
Toaster
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | "bottom-right" | Stack position. |
Accessibility
- Toasts are status regions (errors are assertive alerts).
- Hover or focus pauses the countdown; every toast has a labelled dismiss button.
FAQ
Also searched as: react toast · toast notification · sonner alternative · shadcn toast · snackbar component