Sonner
An opinionated toast component for React.
Installation
›pnpm dlx shadcn@latest add @evolphin/sonner
Usage
import { Toaster } from "@/components/ui/sonner";// Add the Toaster to your layout
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
);
}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>
);
}Examples
Default
API Reference
Toaster
This component is a wrapper around sonner. See the sonner documentation for all available props.
| Prop | Type | Default | Description |
|---|---|---|---|
theme | `"light" \ | "dark" \ | "system"` |
className | string | - | Additional CSS classes |