Introducing @mosespace/toast v3.1.1

Beautiful toast notifications for React.

A lightweight, customizable, and accessible toast component that makes notifications in your React app delightful.

2.5k+ stars on GitHub

Quick Installation

pnpm add @mosespace/toast

Simple Usage

app.tsx


// 1. Paste in this in your global.css if using tailwind v4 or paste it into your tailwind -
//  conmfig if using tailwind v3 and below
------------------------------------------------------------

              @source '../node_modules/@mosespace/toast*.{js,ts,jsx,tsx}';

              or add the following to your tailwind.config.ts
              content: [
              ...
              './node_modules/@mosespace/toast/**/*.{js,ts,jsx,tsx}', // Include this line
            ],

// 2. Add the Toaster component to your app-layout
              ------------------------------------------------------------
              import { Toaster } from '@mosespace/toast'

              function AppLayout() {
                return (
                  <>
                    {children}
                    <Toaster />
                  </>
                )
              };

// 3. Use the toast function anywhere in your app
              ------------------------------------------------------------
              import { toast } from '@mosespace/toast'

              function YourComponent() {
                return (
                  <button onClick={() => toast.sucess('Hello World!')}>
                    Show Toast
                  </button>
                )
              };

Just three simple steps to add beautiful toast notifications to your React app.

Toast Examples

Accessible toast that makes notifications in your React app delightful.

Join hundreds of developers and communities using @MTOAST to render beautiful react toasts, in there modern looking nice front-end.