Sonner | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/sonner

pnpm dlx shadcn@latest add @cortexcn/sonner

Usage

import { Toaster } from "@/components/sonner";

Examples

Basic

import { toast } from "sonner"
import { Button } from "@/components/button"

export function SonnerBasic() {
  return (
    <div className="flex flex-col gap-6 items-center justify-center">
      <Button
        onClick={() => toast("Event has been created")}
        variant="outline"
        className="w-fit"
      >
        Show Toast
      </Button>
    </div>
  )
}

import { toast } from "sonner"import { Button } from "@/components/button"export function SonnerBasic() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <Button        onClick={() => toast("Event has been created")}        variant="outline"        className="w-fit"      >        Show Toast      </Button>    </div>  )}

With description

import { toast } from "sonner"
import { Button } from "@/components/button"

export function SonnerWithDescription() {
  return (
    <div className="flex flex-col gap-6 items-center justify-center">
      <Button
        onClick={() =>
          toast("Event has been created", {
            description: "Monday, January 3rd at 6:00pm",
          })
        }
        variant="outline"
        className="w-fit"
      >
        Show Toast
      </Button>
    </div>
  )
}

import { toast } from "sonner"import { Button } from "@/components/button"export function SonnerWithDescription() {  return (    <div className="flex flex-col gap-6 items-center justify-center">      <Button        onClick={() =>          toast("Event has been created", {            description: "Monday, January 3rd at 6:00pm",          })        }        variant="outline"        className="w-fit"      >        Show Toast      </Button>    </div>  )}

Adapted from the shadcn/ui Sonner (MIT).