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.