Toast

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/toast

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import {
  ToastProvider,
  useToastManager,
  createToastManager,
  useToast,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
} from "@/components/ui/toast";

Composition

Every part is a separate export. ToastProvider owns state; the rest are presentational and must appear in this order.

ToastViewport└── Toast    ├── ToastTitle    ├── ToastDescription    └── ToastCloseToastProvider

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<ToastProvider>
  <StackingDemo />
  <ToastList />
</ToastProvider>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

ToastProvider

PropTypeDefaultDescription

timeoutnumber5000The default amount of time (in ms) before a toast is auto dismissed.

limitnumber3The maximum number of toasts that can be displayed at once.

toastManagerToastManager—A global manager for toasts to use outside of a React component.

PropTypeDefaultDescription

toastToastRootToastObject<any>—The toast to render.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Toast — see its reference for the full keyboard map.

Keyboard focus draws a 2px ring in --ring, never removed — only shown on :focus-visible, so a pointer press does not paint one.
Every transition is dropped under prefers-reduced-motion.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-lgToast

--brand-radius-smToastClose

--fgToast, ToastTitle, ToastClose

--fg-mutedToastDescription

--fg-subtleToastClose

--lineToast

--popup-easeToast

--popup-open-durToast

--ringToastClose

--shadow-overlayToast

--surfaceToastClose

--surface-raisedToast

Source

src/components/ui/toast/toast.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Toast

On this page