NextToast

A lightweight, zero-dependency toast notification system for Next.js. Designed for simplicity and performance.

Installation

Install

pnpm add next-toast

Usage

Add the provider to your root layout.

app/layout.tsx

// app/layout.tsx
import { NextToast } from "next-toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <NextToast />
      </body>
    </html>
  )
}

Basic Notifications

Close button

Rich colors

Renderer config

<NextToast closeButton={false} richColors={false} />

Code

toast.success("Operation successful")

Positioning

Click a position to move the toaster.

Code

<NextToast position="top-center" />

Rich Colors

Enable richColors for vibrant backgrounds.

Renderer config

richColors={false}