How to Add Toast Notifications to React

Before installing the Toast, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 processing your styles and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; the installation page lists the minimal config for a custom setup. The Toast wrapper pulls in two runtime packages that the CLI notes for you: sonner, which supplies the toast engine, and lucide-react, which supplies the five variant icons. And because the Toaster renders a portal and owns the toast queue, its source carries a 'use client' directive — mount it inside a client boundary, not directly in a framework's server-rendered tree.

Run the CLI from your project root to add the Toast source. The command writes a single toast.tsx under your UI directory and notes its two peer dependencies, sonner and lucide-react; install them once if they are not already present and you are set. There is no runtime Drivn package to version-lock — the CLI docs cover the flags for targeting a custom path or adding several components in one run. After install the file is yours: a future Drivn release will not overwrite your edits, and the whole wrapper — the icon map keyed by variant and the token-based style object — is a few lines you can read top to bottom. Commit it for a clean baseline before wiring it in.

The Toast has two parts: the Toaster container, which you mount once, and the toast() function, which you call to show a message. Mount the Toaster high in your tree — the root component in a Vite or CRA app, or the root layout in Next.js — so a single container serves every screen and you never render a second one. Then import toast in any client component and call it from an event handler: toast.success('Saved') shows a green check, toast.error('Something went wrong') a red cross, each with its pre-wired lucide icon. The container draws nothing until a toast fires, so where you place it affects only stacking order, not layout. The toast auto-dismisses on Sonner's default timer and stacks with any others. See the Toast examples for the full set of patterns.

Beyond success and error, toast exposes info and warning, each with its own pre-wired icon — Info and AlertTriangle — plus a plain toast() call for a neutral message with no icon. Every variant takes the same options object as a second argument: a description string adds a secondary line under the title, and an action object with a label and onClick renders an inline button — the classic "deleted, but Undo" pattern. Drivn inherits this API unchanged because it re-exports toast straight from Sonner, so anything the Sonner docs describe works here. toast.loading returns an id you can pass to a later toast.success(msg, { id }) to swap the spinner for a result in place — the spinning Loader2 Drivn wires is exactly what shows during that phase. Reach for a Button as the trigger and a description line for context.

Everything the container renders is set in one place — the Toaster you own. Move the toasts by passing a position prop such as top-center or bottom-left; the default is Sonner's bottom-right. The rest is already wired in the source: five lucide-react icons keyed by variant, and a style object that maps Sonner's CSS variables onto Drivn's design tokens — --normal-bg to var(--card), the text to var(--card-foreground), the border to var(--border), and a --border-radius of 12px. Because those read your Tailwind theme tokens, the toast surface re-themes for dark and light mode automatically; adjust the colors in theming and every toast follows. To swap an icon or the radius, edit the object in place — there is no config file and no variant map to thread through. The snippet below shows the position prop; the style block lives verbatim in toast.tsx.