{"library":"sonner","title":"Sonner: Opinionated Toast Component for React","type":"library","description":"Sonner is an opinionated toast component for React, designed to be beautiful by default and simple to use. It emphasizes accessibility and provides a modern look and feel, inspired by macOS notifications. The library is currently stable at version 2.0.7 and receives regular updates, often with multiple patch releases between minor or major versions. Its key differentiators include built-in support for various toast types (success, error, info, warning, loading), rich customization options through props, and a strong focus on developer experience with a simple `toast()` API. Unlike some alternatives, Sonner aims to provide a consistent, aesthetically pleasing experience without requiring extensive styling, while still offering flexibility for specific needs. It also excels at handling asynchronous operations with its promise-based toast updates.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install sonner"],"cli":null},"imports":["import { Toaster } from 'sonner';","import { toast } from 'sonner';","import type { ToastOptions } from 'sonner';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://sonner.emilkowal.ski","github":"https://github.com/emilkowalski/sonner","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/sonner","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { Toaster, toast } from 'sonner';\nimport './index.css'; // Or wherever your Sonner CSS is located\n\nfunction App() {\n  return (\n    <div>\n      <Toaster richColors position=\"bottom-right\" />\n      <h1>Welcome to my App</h1>\n      <button onClick={() => toast('My first toast!')}>\n        Show Simple Toast\n      </button>\n      <button onClick={() => toast.success('Operation successful!')}>\n        Show Success Toast\n      </button>\n      <button onClick={() => toast.loading('Loading data...', { \n        id: 'loading-toast' \n      })}>\n        Show Loading Toast\n      </button>\n      <button onClick={() => {\n        toast.dismiss('loading-toast');\n        toast.error('Operation failed!');\n      }}>\n        Dismiss Loading & Show Error\n      </button>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to set up the Toaster component, trigger various toast types (simple, success, loading, error), and programmatically dismiss a toast using its ID.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}