Sonner

An opinionated toast component for React.

Radix UI Base UI

About

Sonner is built and maintained by emilkowalski.

Installation

Slider Spinner

On This Page

About Installation Usage Examples Types Description Position API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add sonner

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

import { toast } from "sonner"

toast("Event has been created.")

Use the position prop to change the position of the toast.

"use client"

import { Button } from "@/components/ui/button"

"use client"

import { Button } from "@/components/ui/button"

"use client"

import { Button } from "@/components/ui/button"

"use client"

import { Button } from "@/components/ui/button"

Sonner

About

Installation

Run the following command:

Add the Toaster component

Usage

Examples

Types

Description

Position

API Reference