A short message that melts from a pill into a card. Eight kinds, with stacking and swipe.
Preview
npx shadcn add @fetaui/toastChanges saved to the database. Refresh to see them.
Your card was declined. Try another card or contact your bank.
You have used 92% of your space. Upgrade to keep syncing.
Version 2.4 is available. Reload when you are ready.
Keep this tab open while 3 files upload.
Your file is ready. Share it with your team?
Moved to Archive with 2 replies.
1,240 of 1,940 rows written.
Changes saved successfully to the database. Please refresh the page to see the changes.
Your card was declined. Please try another card or contact your bank.
You’ve used 95% of your available storage. Please upgrade your plan to continue.
Version 2.0 is now available. Please update your app to continue using the latest features.
Keep this tab open while your 3 files finish uploading.
Your file has been uploaded and is ready to share with your team.
The conversation moved to Archive with its 2 replies.
Your report is being written. We will email you when it is ready.
Installation
npx shadcn add @fetaui/toast
Accessibility
- A polite live region, with errors assertive.
- Actions are real buttons.
- Timers pause on hover and focus.
Motion
- The pill drops in over 240 ms, then the tray melts out on a 600 ms spring after 150 ms.
- It collapses 2 s before a 6 s timeout. Undo counts down from 5 s.
- Older toasts scale down and rise on a spring, peeking 38 and 74 px.
- With reduced motion, shapes crossfade, stacks jump and Undo shows only mono seconds.
Responsive behavior
- 360 px on Web and 358 px on Mobile, with a 44 px tab.
- Swipe sideways past 40% to dismiss on touch.
Performance
- Toasts live in a small external store read with useSyncExternalStore, so only the Toaster re-renders when one is added.
- At most three show. Older ones stack behind them with opacity 0 and stay mounted until they time out.
- Each toast measures its height with one ResizeObserver, disconnected on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Render <Toaster /> once near the root, then call toast({ kind, title, description, action, cancel, progress, meta, duration }). It returns an id.
- toast.update(id, patch), toast.dismiss(id) and toast.promise(work, { title, success, error }) handle the rest.
- Loading and Promise stay until updated. Undo closes after 5 s, the others after 6 s. Hover and focus pause the timers.
- The Toast component alone is for previews. The demo's action handlers do nothing.