skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-syntax-toast-sonner

Migrate shadcn ui toasts from Radix Toast to Sonner's imperative API.

Updated May 19, 2026
Search Tags:#shadcn ui#sonner#rsc boundary#toast migration#react client components#toast.promise#Toaster mount
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-toast-sonner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-syntax-toast-sonner
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-syntax/shadcn-syntax-toast-sonner
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-toast-sonner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common shadcn ui notification-toast failures by guiding you to the correct Sonner-only setup and API after the 2026 removal of the Radix Toast and useToast hook.

Core Features & Use Cases

  • Diagnose missing or broken toasts: resolves cases like no <Toaster /> mounted, duplicated <Toaster /> instances, or calling toast() from the wrong boundary.
  • Use the correct Sonner toast APIs: covers toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.promise, toast.custom, and toast.dismiss plus their expected option shapes.
  • Migrate from removed shadcn patterns: replaces useToast() / Radix Toast usage with Sonner’s imperative toast() + the @/components/ui/sonner Toaster wrapper.
  • Real-world use cases: configure toast positioning, duration (including sticky Infinity), action/cancel buttons, and promise-driven loading→success/error state transitions.

Quick Start

Mount a single <Toaster /> in your app root, then call toast.success("Saved") from a component that includes "use client".

Frequently Asked Questions about shadcn-syntax-toast-sonner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are my shadcn ui toasts not showing up after migrating to Sonner?▼

Missing shadcn ui toasts usually occur when a single client-mounted <Toaster /> is not added to the app root or when calling toast() from a server component. Mount <Toaster /> once at the root and ensure the caller includes "use client".

How do I migrate from useToast to the Sonner toast API in shadcn ui?▼

Migrate from useToast by replacing the Radix Toast hook with Sonner's imperative toast() API and importing the Toaster wrapper from @/components/ui/sonner. This applies to component-level triggers and app-root mounting.

How do I use toast.promise for loading to success or error states in shadcn ui?▼

Use toast.promise to wire loading, success, and error state transitions for asynchronous operations. The Sonner API requires correct promise state wiring to transition from a loading spinner to a success or error notification automatically.

Can I call Sonner toast functions from a React Server Component?▼

Sonner toast functions cannot be called directly from React Server Components. You must enforce client/RSC boundary correctness by adding "use client" to the component triggering the toast notification.

What is the correct way to mount the Sonner Toaster in a React application?▼

The Sonner Toaster requires a single client-mounted consumer at the app root. Duplicated <Toaster /> instances or mounting it in the wrong boundary causes broken notification delivery and duplicate toast appearances.

How do I configure toast duration and positioning with Sonner in shadcn ui?▼

Configure toast positioning and duration by passing options to the Sonner toast API calls or the <Toaster /> component. You can set standard durations, use sticky Infinity for persistent toasts, and add action or cancel buttons.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

shadcn-agents-rsc-boundary-validator

Audit Next.js App Router codebases for React Server Components boundary violations in shadcn ui imports.

Official
Advanced
udecodeudecode
434

toast

Render toast notifications with Sonner for success, error, and loading states.

Official
Basic
ancolemanancoleman
503

providing-feedback

Implement toasts, alerts, modals, and progress indicators in frontend applications.

Community
Intermediate
Jicate-SolutionsJicate-Solutions

Toast Migrator Skill

Migrate custom toast hooks to react-hot-toast library methods.

Official
Advanced