Sonner Examples You Can Edit and Run

import { useEffect, useState } from "react";
import { Toaster, toast } from "sonner";

const S = {
  page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" },
  card: { width: 300, background: "#fff", color: "#1f2937", borderRadius: 14, padding: 22, textAlign: "center", boxShadow: "0 10px 30px rgba(0,0,0,.5)" },
  btn: { padding: "10px 18px", border: 0, borderRadius: 8, background: "#111827", color: "#fff", fontSize: 15, fontWeight: 600, cursor: "pointer" },
};

export default function App() {
  const [count, setCount] = useState(0);

  // show one toast right away so the result is visible on load
  useEffect(() => {
    const id = setTimeout(() => toast("My first toast"), 300);
    return () => clearTimeout(id);
  }, []);

  const show = () => {
    setCount(count + 1);
    toast(`Toast number ${count + 1}`);
  };

  return (
    <div style={S.page}>
      {/* every toast() call renders inside this Toaster */}
      <Toaster />
      <div style={S.card}>
        <h2 style={{ margin: "0 0 6px", fontSize: 18 }}>Sonner</h2>
        <p style={{ margin: "0 0 16px", color: "#6b7280", fontSize: 14 }}>Press the button for another toast.</p>
        <button style={S.btn} onClick={show}>Give me a toast</button>
      </div>
    </div>
  );
}