Toast
Brief confirmation for a completed background action.
pnpm dlx shadcn@latest add @uiarc/toastLive · keyboard ready
- A single success confirmation, like Changes saved, controlled with local state.
- Demos or small apps that do not need a toast queue.
- Use toast-stack for app-wide notifications with types, actions, updates, and stacking.
- Use alert for persistent messages that should stay in the page flow.
Installation
Add Toast with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/toastAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import Toast from "@/registry/components/toast/toast"; export function SavedToast() { const [open, setOpen] = useState(false); return ( <> <button type="button" onClick={() => setOpen(true)}>Save</button> <Toast open={open} onOpenChange={setOpen} title="Changes saved" description="Synced to all devices." /> </> );}Toast
A single swipeable notification with a drawn check, auto-dismiss, and morphing copy. Default export.
PropTypeDefaultDescription
titleRequiredstring–Headline. Changes crossfade while shown.descriptionstring–Supporting line.openbooleantrueWhether the toast is shown. Setting it true again after a dismiss re-raises it.onOpenChange(open: boolean) => void–Called with false on close, swipe, or timeout. Auto-dismiss only runs when this is provided.durationnumber4500Milliseconds before auto-dismiss. 0 or less disables it.- Tab then Enter
- Reaches and activates the dismiss button.
- Renders role="status" with aria-live="polite" and aria-atomic, so new content is announced without stealing focus.
- The dismiss button is labelled "Dismiss notification"; the check icon is aria-hidden.
- Positioning is up to the caller; the auto-dismiss timer does not pause on hover, so keep messages short.
- Enters rising 16px from 0.96 scale on a morph spring while the check draws in; a swipe past 80px or 480px/s throws it off with its release velocity.
- Closing sinks it 8px and fades. Copy changes rise in while the height springs to fit.
- Reduced motion uses opacity fades and disables dragging.
- The toast is min(100%, 26rem) wide and the title ellipsizes on one line.
- Positioning is up to you; fix it to the bottom center on phones so it clears the thumb zone edges.
- It swipes horizontally on touch and mouse; drag is disabled under reduced motion.
- Drag and throw run on motion values, and a ResizeObserver springs the height when copy changes.
- The auto-dismiss timer does not pause on hover, so keep messages short.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a single success confirmation you control with local state. Use toast-stack for an app-wide queue with types, actions, updates, and stacking.
- Import as a default export. Position it yourself, for example fixed to the bottom of the viewport.
The full library index for assistants is at /llms.txt.