shadcn-syntax-toast-sonner

name	shadcn-syntax-toast-sonner
description	Use when adding, debugging, or migrating notification toasts in a shadcn ui project, mounting the top-level `<Toaster />` in your app root, calling `toast()` / `toast.success` / `toast.error` / `toast.warning` / `toast.info` / `toast.loading` / `toast.promise`, configuring the Toaster's `position`, `duration`, `expand`, `richColors`, or `closeButton` props, dismissing a toast programmatically via `toast.dismiss(id)`, wrapping a fetch / mutation with `toast.promise` for the loading -> success / error state machine, or removing dead `useToast()` hook calls left over from a pre-2026 shadcn project. Prevents the canonical toast failures : trying to import `useToast` from `@/components/ui/use-toast` (the file no longer exists ; the hook + the Radix-based Toast component were REMOVED per the shadcn 2026 changelog), calling `toast()` before any `<Toaster />` is mounted (the call is silently dropped), mounting two `<Toaster />` instances and getting duplicated stacks, calling `toast()` from inside a React Server Component (Sonner is client-only), forgetting `"use client"` on the component that calls `toast()`, and using `toast.promise` with only two of the three required states (loading + success without error, or success without loading) so the toast hangs or never settles. Covers the shadcn `Toaster` wrapper verbatim from `apps/v4/ registry/new-york-v4/ui/sonner.tsx` (icons, theme integration via next-themes, the CSS-variable bridge to shadcn's `--popover` / `--border` / `--radius` tokens), the upstream `sonner` package API (`toast`, `toast.success`, `toast.error`, `toast.warning`, `toast.info`, `toast.loading`, `toast.promise`, `toast.dismiss`, `toast.custom`), the six `position` values (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right ; default bottom-right), the `duration` prop (default 4000ms, `Infinity` for sticky), `expand` (default true), `richColors` (semantic per-type colors), `closeButton` (X affordance on hover), the one-toaster-per-app rule, and the migration table from `useToast()` -> `toast()`. Keywords: shadcn toast, sonner, Toaster, useToast removed, useToast deprecated, where is useToast, migrate from useToast, toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.promise, toast.dismiss, toast.custom, richColors, closeButton, position prop, duration prop, expand prop, top-right toast, bottom-right toast, sticky toast, Infinity duration, sonner not working, toast not showing, toast silent, toast nothing happens, no toast appears, Toaster not mounted, two toasters, duplicate toasts, toast in server component, RSC toast, "use client" toast, how do I show a notification, how do I show an error message, how do I notify the user, snackbar shadcn, notification shadcn, alert popup shadcn, fetch with toast, toast around fetch, loading toast pattern, optimistic ui toast.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026. The legacy Radix-based `Toast` component and the `useToast` hook were REMOVED per the 2026 changelog ; Sonner is the sole toast primitive.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn ui : Toast (Sonner) Syntax

Sonner is the sole notification-toast primitive in shadcn ui as of 2026. The previous Radix-based Toast component and its companion useToast() hook were REMOVED per the shadcn changelog. The shadcn registry now ships a single Toaster wrapper around the upstream sonner package (see apps/v4/registry/new-york-v4/ui/sonner.tsx), and all toast calls go through the imperative toast() API imported directly from sonner.

REMOVAL NOTICE : useToast is gone

If your project has any of the following, it is dead code from a pre-2026 shadcn project and MUST be removed :

• import { useToast } from "@/components/ui/use-toast" : the file components/ui/use-toast.ts no longer exists in the registry. Delete the import.
• import { Toast, ToastProvider, ToastViewport } from "@/components/ui/toast" : the file components/ui/toast.tsx (Radix-based) no longer exists. Delete the import.
• const { toast } = useToast() : the hook is gone. Replace with import { toast } from "sonner" (a top-level import, NOT a hook).
• <Toaster /> from @/components/ui/toaster : the old file at components/ui/toaster.tsx (the Radix viewport) no longer exists. Replace with <Toaster /> from @/components/ui/sonner.

See the migration table at the bottom of this skill for line-by-line replacement.

Quick Reference

The two surfaces

Surface	Purpose
<Toaster /> (mounted once, in the app root)	Renders the toast viewport ; without it, every toast() call is silently dropped
toast(...) (imported from sonner)	Imperative API ; call from anywhere in a client component to enqueue a toast

Minimal setup

app/layout.tsx (Next.js App Router, RSC-friendly) :

import { Toaster } from 

   () {
   (
    
  )
}