Sonner

An opinionated toast component for React.

Installation

Add the sonner component with the shadcn CLI.

bash

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

Usage

tsx

import { Sonner } from "@/components/ui/sonner"

Examples

Default

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>