Docs
Toast

Toast

How to do toasts.

Installation

Install the following dependencies:

pnpm add zustand sonner

Add Component to base layout.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={GeistSans.className}>
        {children}
        <Toaster richColors />
      </body>
    </html>
  );
}

(Optional) Add util for default error message.

lib/toast.ts
import { toast as showToast } from "sonner";
 
export const toast = {
  ...showToast,
  error: (message = "Es ist ein Fehler aufgetreten.") => {
    showToast.error(message);
  },
};