Documentation

Full configuration, interactive controls, and API references.

Installation

npm install better-toast-react

1. Render Toaster

Add the Toaster component once at the root level of your project layout.

// app/layout.tsx (Next.js Root Layout)
import { Toaster } from 'better-toast-react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="top-center" />
      </body>
    </html>
  );
}

2. Trigger Toast

Call the toast API anywhere inside your client React components.

import { toast } from 'better-toast-react';

// Simple message
toast('Hello world!');

// Status types
toast.success('Saved successfully!', {
  description: 'Your changes are now live.',
});

// Promises
toast.promise(fetchData(), {
  loading: 'Loading API...',
  success: 'Data loaded!',
  error: 'Could not fetch data.',
});