shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/sonner.jsonnpx shadcn@latest add https://kit.dev/r/aria/sonner.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/sonner.jsonyarn shadcn@latest add https://kit.dev/r/aria/sonner.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add sonner lucide-reactnpm install sonner lucide-reactpnpm add sonner lucide-reactyarn add sonner lucide-reactCopy and paste the following code into your project.
"use client";
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react";
import type React from "react";
import {
Toaster as Sonner,
toast as sonnerToast,
type ToasterProps,
} from "sonner";
import { cn } from "@/lib/utils";
export const toast = sonnerToast;Update the import paths to match your project setup.
Usage
Add Toaster once, then call toast.
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/sonner";<>
<Toaster />
<Button
variant="outline"
onClick={() => toast("Event has been created")}
>
Show Toast
</Button>
</>Demos
Types
Status toasts and a promise toast.
Description
Toast with a description.
Position
Place the toast with the position option.
API Reference
toast
createToaster
Toaster
PropType
AttributeType
CSS variableType
--borderstring--popoverstring--popover-foregroundstring--radiusstring