Components
Sonner
Toast notifications powered by sonner.
Sonner is built on the sonner library. The Toaster component sets up the viewport, and the toast function (imported from sonner) triggers notifications programmatically.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/sonner.jsonUsage
Add the Toaster to your root layout, then call toast() anywhere in a client component:
import { Toaster } from "@/components/ui/sonner";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
);
}"use client";
import { toast } from "sonner";
export function SaveButton() {
return <button onClick={() => toast("Event has been created")}>Save</button>;
}Examples
Default
With description and action
Types
The toast function accepts a type option that renders an icon:
toast.success("Saved");
toast.info("Heads up");
toast.warning("Warning");
toast.error("Failed");
toast.loading("Loading");
toast.promise(myAsyncFn, { success: "Done", error: "Failed" });API
| Component | Description |
|---|---|
Toaster | The viewport. Drop it in your layout once. |
toast | The trigger function (imported from sonner). Call toast(message). |
Changelog
Full Sonner historyLast updated on