- Docs
- components
- Toast
Toast
A succinct message that is displayed temporarily.
Copy and paste the following code into your project.
import { Toaster as ToasterPrimitive } from "sonner";
export interface ToasterProps
extends React.ComponentProps<typeof ToasterPrimitive> {}
export function Toaster(props: ToasterProps) {
return (
<ToasterPrimitive
toastOptions={{
unstyled: true,
classNames: {
toast:
"flex items-center w-(--width) h-(--front-toast-height) gap-1.5 bg-bg text-fg border shadow-lg p-4 rounded-xl text-sm font-sans",
description: "text-muted-fg!",
closeButton: "bg-bg! text-fg! !border-border",
},
}}
{...props}
/>
);
}
Add the Toaster component
src/app/providers.tsx"use client";
import { ThemeProvider } from "next-themes";
import { useRouter } from "next/navigation";
import { RouterProvider } from "react-aria-components";
import { Toaster } from "./ui/toast";
declare module "react-aria-components" {
interface RouterConfig {
routerOptions: NonNullable<
Parameters<ReturnType<typeof useRouter>["push"]>[1]
>;
}
}
interface ProvidersProps {
children: React.ReactNode;
}
export function Providers({ children }: ProvidersProps) {
const router = useRouter();
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<RouterProvider navigate={router.push}>
{children}
<Toaster />
</RouterProvider>
</ThemeProvider>
);
}
import { toast } from "~/components/ui/toast";
toast("Hello, World!", {
description: "This is a toast message.",
});