Yami

Sonner

An opinionated toast component for React.

Installation

Add the sonner component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/sonner.json

Usage

import { toast } from "sonner"

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

<Button
  variant="outline"
  onClick={() =>
    toast("Event has been created", {
      description: "Sunday, June 12 at 1:53 PM",
    })
  }
>
  Show Toast
</Button>

Examples

Default

Code

import { toast } from "sonner"

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

<Button
  variant="outline"
  onClick={() =>
    toast("Event has been created", {
      description: "Sunday, June 12 at 1:53 PM",
    })
  }
>
  Show Toast
</Button>