Usage

Quick-start guide for adding toast notifications to your app.

Quick Start - React

Wrap your app with the ToastContainer and call toast anywhere:

// 1. Add ToastContainer to your root layout (renders the toast portal)
import { ToastContainer } from "nudge-ui/react";
import "nudge-ui/dist/toaster.css";

export default function App({ children }) {
  return (
    <>
      {children}
      <ToastContainer />
    </>
  );
}

// 2. Call toast from any component
import { toast } from "nudge-ui";

function SaveButton() {
  const handleSave = async () => {
    await save();
    toast.success("Saved successfully!");
  };
  return <button onClick={handleSave}>Save</button>;
}

All Toast Types

import { toast } from "nudge-ui";

toast.show("Default notification");
toast.success("Operation completed!");
toast.error("Something went wrong.");
toast.warning("This action is irreversible.");
toast.info("New version available.");
toast.loading("Uploading file…");

// Or use the generic form with type option:
toast.show("Hello!", { type: "success", position: "bottom-center" });

Promise Toasts

// Show loading → then success or error automatically
const id = toast.loading("Fetching data…");
try {
  const data = await fetchData();
  toast.update(id, { type: "success", message: "Data loaded!" });
} catch {
  toast.update(id, { type: "error", message: "Failed to load data." });
}

Vanilla JS (no framework)

import { ToasterCore } from "nudge-ui/core";
import "nudge-ui/dist/toaster.css";

const toaster = new ToasterCore();

// Mount the container into your DOM
const container = document.createElement("div");
document.body.appendChild(container);
toaster.mount(container);

// Trigger toasts
toaster.addToast("Hello, world!", { type: "success" });

Next.js App Router

// app/layout.tsx
import { ToastContainer } from "nudge-ui/react";
import "nudge-ui/dist/toaster.css";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ToastContainer />   {/* renders via React portal */}
      </body>
    </html>
  );
}

// Any Server or Client component:
// In server actions, import and call toast from the client component layer.

PreviousInstallation

NextAPI Reference