Toast

Pop-up notifications. Free, MIT · Overlays and notifications › Messages and status

Renders toasts created with toast(). Mount exactly one per app. Sonner-style stack: collapsed by default, expands on hover/focus, which also pauses timers. Toasts sit above modals, and pressing one does not dismiss the modal under it.

Installation

npx valyro-cli@latest add toast

npx shadcn@latest add https://valyro.xyz/r/toast.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Toaster, toast } from 'valyro-ui';

Props

Prop	Type	Default
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-right'`	Viewport corner or edge the stack sits at; new toasts enter from that edge. On phones (≤ 600px) it spans the width.
`visibleToasts`	`number`	`3`	Toasts beyond this count wait (hidden, timers paused) behind the stack.
`richColors`	`boolean`	`false`	Tint success / error / warning / info toasts with their status color.
`closeLabel`	`string`	`'Close notification'`	Accessible name of each toast's close button.

Related components

Alert — Inline alerts
Notification Center — Notification inbox
Loading Overlay — Loading screen
Dialog — Modal dialogs
Confirm Dialog — Action confirmation
Drawer — Slide-out panels
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode
Popover — Floating content
Hover Card — Card on hover
Tour — Onboarding tour: element spotlight, steps, progress and resume

Previous: Alert · Next: Notification Center · All Overlays and notifications