Toast
Stacked toasts that fan out on hover, swipe away horizontally, and pause their timers while you read.
- Category: Overlays
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Toast
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
toast(title, options?) | (title: string, { description?, variant?: 'default' | 'success' | 'error', duration? }) => id | — | |
toast.dismiss(id) | (id: number) => void | — | |
<Toaster /> | Mount once, near the root. | — |
About Toast
Toast shows stacked notifications that fan out on hover, swipe away sideways and pause their timers while you read. Call toast() from anywhere.
Toast is an overlay component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Toast
- Save and error confirmations.
- Background job updates.
- Copy and share feedback.
- Undoable actions.
How it works
A small store holds the queue; the Toaster renders and stacks it. Timers pause on hover and focus, and toasts are announced through a polite live region.
It traps and returns focus correctly, closes on Escape, and is announced to screen readers with the right dialog or menu role. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Toast
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- toast(title, options?).
- toast.dismiss(id) ((id: number) => void).
- <Toaster /> (Mount once, near the root.).
Goes well with Toast
These overlays pieces share its tokens and motion language, so they sit together on one page without clashing.
- Tooltip: An animated React tooltip that springs from its trigger, with instant neighbours
- Popover: An animated React popover that scales from its trigger and returns focus on close
- Dialog: An animated React dialog on the native dialog element, with blur and scale transitions
- Drawer: A React bottom sheet drawer you can fling closed, with rubber-banding at the top
- Sheet: An animated React side sheet on the native dialog element that you can fling closed
Install Toast
npx shadcn@latest add https://charcoalui.com/r/toast.jsonToast is free and MIT licensed. The command copies toast.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Dynamic Island, a Pro piece: A black pill that morphs its size and content between states, like the iPhone's Dynamic Island.
Frequently asked questions
- How do I show a toast?
- Mount the Toaster once near the root, then call toast() from anywhere with a message, or toast.success and toast.error for those styles.
- How do I install Toast?
- Run npx shadcn@latest add https://charcoalui.com/r/toast.json. The shadcn CLI copies toast.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Toast free for commercial use?
- Yes. Toast is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Toast work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Toast?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Toast's props and source and get_install_command returns the exact command.