Sonner
A toast component displays a message to the user.
A toast component displays a message to the user.
Follow these simple steps to add the Sonner component to your project:
Install Dependencies
pnpm add sonner
Create a new file: components/ui/sonner.tsx and copy the code below:
"use client";
import { Toaster as Sonner } from "sonner";
type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
position="top-right"
className="toaster group"
toastOptions={{
classNames: {
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:shadow-black/5",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:data-[button]:h-8 group-[.toast]:data-[button]:rounded-lg group-[.toast]:data-[button]:px-3 group-[.toast]:data-[button]:text-xs group-[.toast]:data-[button]:font-medium",
cancelButton:
"group-[.toast]:data-[button]:h-8 group-[.toast]:data-[button]:rounded-lg group-[.toast]:data-[button]:px-3 group-[.toast]:data-[button]:text-xs group-[.toast]:data-[button]:font-medium",
},
}}
{...props}
/>
);
};
export { Toaster };Add the Sonner component to your project.
app/layout.tsx
import { Toaster as Sonner } from "@/components/ui/sonner";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Sonner />
</body>
</html>
);
}Adjust the import paths in both files according to your project's structure.