v1.0.1 — Now Available

Beautiful toast
notifications
for React

A lightweight, accessible, fully-typed toast notification library. Zero dependencies. Pure CSS animations. Dark mode. Promise tracking. Queue system. Production-ready.

Get Started
$npm install toast-23

Try it live

Click the buttons to see toast-23 in action. Hover a toast to see the progress bar refill!

Code Snippet

const toast = useToast();

toast.success("Saved successfully!");
toast.error("Something went wrong!");
toast.warning("Check your input");
toast.info("Update available");
toast-23
Click a button to see a toast →

Everything you need
nothing you don't

Designed for developers who want a minimal yet powerful toast library.

5 Variants

Success, error, warning, info, and default beautifully styled out of the box.

6 Positions

Place toasts in any corner or center of the screen with smooth directional animations.

Promise API

Track async operations with automatic loading → success / error transitions.

Queue System

Configurable max visible toasts with intelligent queue management.

Dark Mode

Automatic via prefers-color-scheme or manual with .dark class toggle.

Accessible

ARIA live regions, proper roles, and keyboard-navigable dismiss buttons.

Zero Dependencies

Only React as a peer dependency. Pure CSS animations — no animation library needed.

Fully Typed

Complete TypeScript API with exported types for maximum developer experience.

Works with your favorite framework

Built for React, compatible everywhere. Use toast-23 in any framework that supports React components.

React
Next.js
Remix
Gatsby
Astro
Angular
Vue.js

Simple API

Three steps to beautiful toast notifications

1Wrap
<Toast23Provider>
  <App />
</Toast23Provider>
2Hook
const toast = useToast();
3Toast
toast.success("Done!");
toast.error("Oops!");
toast("Hello!");

Ready to get started?

Add beautiful, accessible toast notifications to your React app in under a minute.

Read the docsAPI Reference