Toast

Stacked notifications with a tiny toast() API. No provider needed.

Built on Icons. Installs motion.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/toast.json

Usage

import { Toaster, toast } from "@/components/ui/toast"

// Once, near the root of your app
<Toaster />

// Anywhere, even outside React
toast.success("Invite sent to ana@acme.dev")

Examples

Status

Each status brings its own icon and color. Reuse an id to turn a loading toast into a result.

Promise

toast.promise shows one toast that follows the promise from pending to settled.

Positions

Set position on the Toaster. Top positions enter from above.

API reference

Toaster

Renders the toasts. Mount one per app; if several are mounted, the most recent one shows them. Also accepts native section attributes.

Prop	Type	Default
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` Corner or edge of the viewport, 16px from it.	`"bottom-right"`
`max`	`number` Toasts visible at once. Older ones stay hidden until their timers run out.	`3`
`color`	`NeonColor` Color of default and loading toasts. Falls back to --neon-accent, then cyan.	inherited

toast(title, options?)

Shows a toast and returns its id. title can be any React node.

Prop	Type	Default
`description`	`ReactNode` Secondary line under the title.	None
`status`	`"default" \| "success" \| "error" \| "warning" \| "info" \| "loading"` Sets the icon and color.	`"default"`
`color`	`NeonColor` Overrides the status color.	None
`duration`	`number` Milliseconds on screen. Infinity keeps it until dismissed. Loading toasts default to Infinity.	`4000`
`action`	`{ label: string; onClick: () => void }` A button inside the toast. Clicking it also dismisses the toast.	None
`id`	`string` Pass the id of a visible toast to replace its content in place and restart its timer.	None

Methods

Prop	Type	Default
`toast.success / error / warning / info / loading`	`(title, options?) => string` Shorthands that set status.	None
`toast.dismiss`	`(id?: string) => void` Dismisses one toast, or all of them when called without an id.	None
`toast.promise`	`(promise, { loading, success, error }, options?) => Promise<T>` Shows loading, then success or error on the same toast. success and error can be functions of the result or error. Returns the original promise.	None

Accessibility

The stack is a labelled region. Each new or updated toast is read from a live region that stays mounted, politely, except errors, which interrupt.
Hovering the stack or tabbing into it expands it and pauses every timer; timers also pause while the tab is hidden.
Swipe a toast sideways to dismiss it. On touch screens the close button stays visible.
Toasts disappear, so never make one the only way to reach an action.
The stack renders into document.body (or the modal dialog the Toaster sits in), so a transformed or z-indexed parent can't clip or bury it. Without a color it takes --neon-accent from where it's mounted.