--- title: Sonner description: An opinionated toast component for React. component: true links: doc: https://sonner.emilkowal.ski --- ## About Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowalski_). ## Installation CLI Manual Run the following command: ```bash npx shadcn@latest add sonner ``` Add the Toaster component ```tsx title="app/layout.tsx" {1,9} import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { return (
{children}
) } ```
Install the following dependencies: ```bash npm install sonner next-themes ``` Copy and paste the following code into your project. Add the Toaster component ```tsx title="app/layout.tsx" {1,9} import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { return (
{children}
) } ```
## Usage ```tsx import { toast } from "sonner" ``` ```tsx toast("Event has been created.") ```