Toast / Notification

A robust, highly-animated notification system. Popups and alerts are essential for user feedback, but most libraries are heavy, difficult to style, or lack smooth animations.

This headless-style Toast component handles its own global state via Context, uses the browser's built-in Web Animations API for elastic entrance/exit animations (no animation library), automatically handles stacking, and integrates flawlessly with your dynamic theme engine.

Click the trigger buttons in each preview to fire a toast. Toasts auto-dismiss after 5 seconds — hover to pause the timer, or click the X to dismiss it manually. Turn on stack to pile them up like a notification centre instead of listing them.

Toast

Wrap the app in ToastProvider, then call toast() from the useToast hook.

position: on the provider is global — individual toasts cannot override it.

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 Toast

npx shadcn@latest add @algorize-ui/toast

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

Install dependencies

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

Wrap your app

ToastProvider owns the queue, so it has to sit above anything that calls useToast — usually app/layout.tsx. The global variant and position are set there, and the first example's Usage tab shows the whole wiring.

Examples

Types

type: picks the icon and accent — success, error, warning, info or default.

With action

Passaction: to add a button. Clicking it dismisses the toast as well as running your handler.

Duration

duration: is the auto-dismiss delay in milliseconds. 0 keeps the toast up until it is dismissed.

Glow

Setvariant"glow": to surround the card with a coloured halo — built for dark surfaces.

Glass

Setvariant"glass": for a frosted card with the type accent bleeding in from the icon corner — solid badge icons, centred close button.

Stacked

Fire a few in a row, then hover the pile to fan it out.

Setstack: on the provider to pile toasts behind the newest one instead of listing them. Hovering expands the pile and pauses every timer in it; stack works with any variant.

Minimal

Setvariant"minimal": to strip the card down to a thin accent bar and text.

Features

Discover the Toast component's notification features, including auto-dismissal, action buttons, and accessible screen reader announcements.

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

`<ToastProvider>` Props

Prop	Type	Default	Description
`position`	`"top-right" \| "top-left" \| "top-center" \| "bottom-right" \| "bottom-left" \| "bottom-center"`	`"bottom-right"`	The global position where all toasts will stack on the screen.
`variant`	`"default" \| "glow" \| "glass" \| "minimal"`	`"default"`	Determines the global visual styling of the toast cards. `glow` adds a coloured halo, `glass` a frosted, type-tinted card, `minimal` a thin accent bar.
`stack`	`boolean`	`false`	Piles toasts on top of each other with the newest in front and older ones peeking out behind it. Hovering the pile fans it out into a list and pauses auto-dismiss until the pointer leaves.

`toast(options)` Properties

When calling the toast() function from the useToast hook, you can pass the following properties in the options object:

Property	Type	Default	Description
`title`	`string`	Required	The bold, primary text displayed at the top of the toast.
`description`	`string`	`undefined`	The subtle, secondary text displayed below the title.
`type`	`"success" \| "error" \| "warning" \| "info" \| "default"`	`"default"`	Determines which icon is rendered next to the text.
`duration`	`number`	`5000`	Time in milliseconds before the toast automatically dismisses. Set to `0` to disable auto-dismiss.
`action`	`{ label: string, onClick: () => void }`	`undefined`	If provided, renders a bold, clickable button at the bottom of the toast. Automatically dismisses the toast when clicked.