How do I handle asynchronous API calls?

You can use the toast.promise() method, which automatically transitions the toast between loading, success, and error states based on the promise resolution.

Does it support dark mode and theming?

Yes, the shadcn wrapper is designed to sync with theme providers like next-themes, automatically updating the toast appearance.

Where should I place the Toaster component?

The Toaster should be placed once in your root layout (e.g., layout.tsx), preferably wrapped inside your theme or context providers.

Which toast library does this skill use?

It uses the Sonner library, implemented via the shadcn/ui wrapper to ensure consistency with your project's design system.

Shadcn Toast Notifications

Name: Shadcn Toast Notifications
Author: xyqyear

byxyqyear

0•

设计工具

Implements accessible and customizable toast notifications using Sonner integrated with shadcn/ui components.

This skill streamlines the implementation of professional toast notifications in React projects by combining the power of the Sonner library with shadcn/ui design patterns. It provides Claude with the specific instructions, setup commands, and code snippets needed to install the shadcn/ui toast component, configure the root layout with a theme-aware toaster, and implement various notification types including success, error, loading, and promise-based feedback. It ensures consistent styling by bridging shadcn CSS variables to Sonner's internal system.

主要功能

01Pre-configured Lucide icons and shadcn CSS variable mapping

02Automated promise handling for async operation feedback

03Theme-aware notifications with next-themes support

040 GitHub stars

05Seamless shadcn/ui and Sonner library integration

06Customizable toast content with JSX and interactive action buttons

使用场景

01Creating interactive notifications with 'Undo' or custom action buttons

02Adding real-time feedback for form submissions and API calls

03Displaying persistent system alerts or connection warnings

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-toast

For use in Claude.ai and ChatGPT

主要功能

01Pre-configured Lucide icons and shadcn CSS variable mapping

02Automated promise handling for async operation feedback

03Theme-aware notifications with next-themes support

040 GitHub stars

05Seamless shadcn/ui and Sonner library integration

06Customizable toast content with JSX and interactive action buttons

使用场景

01Creating interactive notifications with 'Undo' or custom action buttons

02Adding real-time feedback for form submissions and API calls

03Displaying persistent system alerts or connection warnings

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-toast

For use in Claude.ai and ChatGPT