sonner-demo
"use client"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
export function SonnerDemo() {
return (
<Button
variant="outline"
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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/sonner-demo.json"About
Sonner is built and maintained by emilkowalski_.
Installation
Run the following command:
pnpm dlx shadcn@latest add sonner
Add the Toaster component
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
)
}Usage
import { toast } from "sonner"toast("Event has been created.")