Feedback

Sonner

Toast notifications via Sonner. Supports success, error, warning, and custom durations.

Install

pnpm add @codefast/ui

Import path

@codefast/ui/sonner

Examples

Click to fire a real toast — default, success, error, and warning.

An opinionated toast component for React.

Use the position prop to change the position of the toast.

How the parts compose. Copy this skeleton and fill in the slots.

import { Toaster, toast } from "@codefast/ui/sonner";

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

// anywhere
toast.success("Saved!");

Props for each part of the component. All native element props are also forwarded.

Imperative API. Call a method to enqueue a toast.

Prop	Type	Default	Description
toast(message, options?)	(message, ToastOptions) => id	—	Base toast. .success / .error / .warning / .info set the variant.
toast.promise(p, msgs)	(Promise, { loading, success, error }) => void	—	Shows loading, then resolves to success or error automatically.
options.action	{ label: string; onClick: () => void }	—	Renders a button inside the toast (e.g. Undo).
options.description	ReactNode	—	Secondary line under the title.

Mount once. Renders the toast region.

Prop	Type	Default	Description
position	"top-right" \| "bottom-right" \| …	"bottom-right"	Corner the toasts stack in.
richColors	boolean	false	Use saturated success/error backgrounds.

Built to be keyboard-navigable and screen-reader friendly out of the box.

Toasts render in an aria-live region so screen readers announce them.
Keep messages short; put any required action behind an explicit action button.
Don’t use toasts for critical errors that need a decision — use an Alert Dialog.

Conventions that keep usage consistent across an app.

Don’t