Toast Notifications

A toast implementation using the Popover API for top-layer rendering, CSS positioning, and View Transitions for smooth animations. Inspired by Sonner.

Try it out

Toast Position

Toast Type

Implementation Details

Top Layer (Popover API)

Toasts render in the browser's top layer using the Popover API, ensuring they always appear above other content.

CSS Positioning

Six position options using CSS fixed positioning. Toasts stack automatically with smooth transitions.

View Transitions

Entry and exit animations powered by the View Transitions API for buttery-smooth state changes.

API Usage

toast('Event created')

toast(message) — Default toast
toast.success(message) — Success variant with icon
toast.error(message) — Error variant with icon
toast.warning(message) — Warning variant with icon
toast.info(message) — Info variant with icon