Sonner

An opinionated toast component for React.

shadcn/ui docs

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/sonner.json

Usage

import { toast } from "sonner"
 
import { Button } from "@/components/ui/button"
<Button
  onClick={() =>
    toast("Event has been created", {
      description: "Sunday, December 03, 2023 at 9:00 AM",
      action: {
        label: "Undo",
        onClick: () => console.log("Undo"),
      },
    })
  }
>
  Show Toast
</Button>

Examples

Default

Success

Info

Warning

Error

Action

Cancel

Promise