Sonner (Toast Stack)

An opinionated, dependency-free toast component that mimics the famous "Sonner" library aesthetic.

Traditional toast notifications stack in a massive, screen-blocking vertical list. This SonnerBlock stacks new notifications on top of old ones, scaling older toasts down and pushing them backwards in 3D space to keep your UI clean. Hovering over the stack automatically expands it so users can read previous notifications.

Click the trigger buttons to spawn toasts, then hover the floating stack to expand it.

Sonner

Mount <Toaster /> once, then call toast() from anywhere — no provider needed.

children: of toast() is the message; everything else about the toast is optional.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Sonner

npx shadcn@latest add @algorize-ui/sonner

components/custom/blocks/SonnerBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Sonner needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Types

Usetoast.success: toast.error and toast.info for the semantic icon and colour. They take the same arguments as toast().

With action

Passaction: as { label, onClick } to add an inline button — the usual home for Undo.

Stacking

position: on the Toaster decides where they pile up; newer toasts sit on top and older ones recede until hovered.

Always expanded

Setexpand: on the Toaster to keep the stack open instead of collapsing it to a pile.

Duration

duration: is the auto-dismiss delay in milliseconds. Pass Infinity and the toast stays up until dismissed.

Position

position: anchors the stack to any of the six edges — top-left through bottom-right.

Features

Explore the Sonner toast notification features, including stacked layouts, swipe-to-dismiss, and promise-based loading states.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Target	Prop / Argument	Type	Default	Description
`<Toaster>`	`position`	`"bottom-right" \| "bottom-center" \| "bottom-left" \| "top-right" \| "top-center" \| "top-left"`	`"bottom-right"`	Controls where the stack anchors on the screen.
`<Toaster>`	`expand`	`boolean`	`false`	If true, the stack is permanently expanded and will not collapse into the 3D view.
`toast()`	`title`	`string`	Required	The main, bold text of the notification. Passed as the first argument to the function.
`toast()`	`options.description`	`string`	`undefined`	Optional secondary text displayed beneath the title.
`toast()`	`options.duration`	`number`	`4000`	How long (in milliseconds) before the toast auto-dismisses. Pass `Infinity` to disable auto-dismiss.
`toast()`	`options.action`	`{ label: string, onClick: () => void }`	`undefined`	Provides an actionable button inside the toast.
`toast()`	`options.type`	`"default" \| "success" \| "error" \| "info"`	`"default"`	Determines the color scheme and accompanying icon. Alternatively, use the shorthand methods: `toast.success()`, `toast.error()`, etc.