Shadcn Sonner
React toast for save confirms, undo, and async feedback. Built with TypeScript and Tailwind CSS for Next.js using Base UI — success, error, and promise states.
Sonner is a toast. You call toast() and a notice slides in, stacks, then leaves. Use it after a save, a copy, a failed request, or an undo — not when they have to read the message before they continue.
Looking for a neobrutalism version for shadcn?
Same sonner, thicker borders. The NeoBrutalism sonner is the kit if you want that look.
Usage
import { Toaster } from "@/components/ui/sonner"
import { toast } from "sonner"toast("Kit published.")Mount <Toaster /> once in the root layout. After that, toast() works from any client component.
Composition
toast, toast.success, toast.error, and toast.promise come from sonner, not from the wrapper.
Types
toast(), toast.success, toast.info, toast.warning, toast.error, and toast.promise.
Description
Pass description for the second line — a time, a filename, or the next step.
Position
position on the toast, or on <Toaster /> for the default stack.
API
Prop
Type
toast
Prop
Type
toast.promise takes loading, success, and error. toast.dismiss(id) removes one.
Keyboard
| Key | Action |
|---|---|
Alt + T | Focus the toaster and expand the stack |
Tab | Move through toast actions |
Escape | Collapse the stack when the toaster is focused |
Notes
Toaster has to be mounted
toast() queues nothing until <Toaster /> is in the tree. Put it once in app/layout.tsx, next to {children}.
The wrapper already sets theme from next-themes and turns on richColors.
With other components
Fire it from a click
FormSaved, or it failed
ProgressUpload just finished
AttachmentFile is done
SpinnerPromise still loading
Data TableBulk action result
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Slider
React slider for volume, price filters, and settings. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one thumb or a range, keyboard steps included.
Spinner
React spinner for buttons, badges, and async waits. Built with TypeScript and Tailwind CSS for Next.js using Base UI — size it with utilities, keep role=status.