0 deps · <5KB gzip · zero-config

Toast notifications your React app will love.

Call toast() from anywhere. One mounted <Toaster/> renders it. Promise-aware, swipe-dismissable, accessible, themeable. Under 5KB, zero runtime dependencies.

View source

$ npm i @embertoast/react

live · dogfooded

Configure it live. The buttons fire the real thing.

Every control mutates the same store this page renders from. Change the position, drop the CTAs, watch an upload morph into a result. Swipe one away.

live playgrounddogfooding @embertoast/react

position

theme

dir

order

visibleToasts

duration (s)

actions (cta)

closeButton

richColors

expand (stack)

app.tsx

import { toast, Toaster } from "@embertoast/react";
import "@embertoast/react/styles.css";

function Save() {
  return (
    <button onClick={() => toast.success("Saved")}>
      Save
    </button>
  );
}

// mount once, near the root
export function App() {
  return <Toaster position="bottom-right" closeButton />;
}

One function, anywhere

toast() is a store, not a hook. Call it in a handler, a util, or any non-React module. One <Toaster/> renders it.

The polish, built in

Promise toasts that morph in place, swipe-to-dismiss, FLIP reflow, pause-on-hover, a depleting timer bar, all on by default.

Accessible & tiny

aria-live done right, never steals focus, honors reduced-motion. Zero deps, under 5KB min+gzip.

Install in seconds.

React 18+ as a peer. You only install the binding: @embertoast/react.

terminal

npm i @embertoast/react
# or
pnpm add @embertoast/react