Toast · paneui

Installation

pnpm dlx shadcn@latest add @paneui/toast

Usage

import { ToastProvider, useToast } from "@/components/ui/toast"

// Once, at the root of your app
<ToastProvider>{children}</ToastProvider>

// Anywhere inside it
const toast = useToast()
toast.add({ title: "Saved", description: "Your changes are live.", type: "success" })

Examples

Types

With Action

Promise

Use for saves and uploads that take a moment; the toast follows the promise to success or error.

Persistent

RTL

Motion

Hovering or focusing the stack expands it, and swiping right or down dismisses a toast.

Accessibility

Toasts are announced in a live region. Timers pause while the stack is hovered or focused, and F6 moves focus into the viewport.

API Reference

Built on the Toast primitive. Only the props this library adds or changes are listed; everything else passes through.

ToastProvider

Wrap your app once. Renders the viewport (fixed bottom-right) and the stacked toasts. Also accepts every prop of Toast.Provider.

limit= 3: number; Toasts shown at once; older ones are hidden.
timeout= 5000: number; Default auto-dismiss in ms. 0 never dismisses.

Prop	Type	Default	Description
limit	number	3	Toasts shown at once; older ones are hidden.
timeout	number	5000	Default auto-dismiss in ms. `0` never dismisses.

useToast

Alias of the toast primitive's useToastManager. Returns { toasts, add, update, close, promise }; add returns the toast id and close() with no id clears every toast. Also accepts every prop of Toast.useToastManager.

title: ReactNode; First line, medium weight.
description: ReactNode; Muted second line.
type: "success" | "error" | "warning" | "info" | "loading" | string; Known types get an icon; loading spins.
timeout: number; Override the provider timeout for this toast; 0 keeps it until dismissed.
priority= "low": "low" | "high"; How urgently screen readers announce it.
actionProps: ComponentProps<"button">; Renders an action button; pass children and onClick.
onClose: () => void; Called when the toast starts closing.

Prop	Type	Default	Description
title	ReactNode	—	First line, medium weight.
description	ReactNode	—	Muted second line.
type	"success" \| "error" \| "warning" \| "info" \| "loading" \| string	—	Known types get an icon; `loading` spins.
timeout	number	—	Override the provider timeout for this toast; `0` keeps it until dismissed.
priority	"low" \| "high"	"low"	How urgently screen readers announce it.
actionProps	ComponentProps<"button">	—	Renders an action button; pass `children` and `onClick`.
onClose	() => void	—	Called when the toast starts closing.