Getting Started | Beautiful toast notifications for React

Mtoast is an opinionated toast component for React. You can read more about why and how it was built here.

Installation

Install the component from your command line.

pnpm i @mtoast/mosespace

Add Toaster to your app

It can be placed anywhere, even in server components such as layout.tsx.

import { Toaster } from '@mtoast/mosespace';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Render a toast

import { toast } from '@mtoast/mosespace';
 
function MyToast() {
  return (
    <button
      onClick={() => toast.success('Rendered!', 'This is a mtoast toast')}
    >
      Render my toast
    </button>
  );
}