ToastFlux – The Modern React Toast Library
A lightweight, beautiful, and fully customizable toast notification library for React & Next.js. Under 3kb gzipped. Zero configuration required. The modern alternative to Sonner and React-Toastify.
Try It Live – Interactive Playground
Interactive Playground
Click any button below to see the different toast types in action.
Why Choose ToastFlux for React Notifications?
Get up and running in seconds. ToastFlux handles the queueing, animations, and accessibility out of the box — no extra configuration needed.
- Zero configuration required
- Optimized for Next.js App Router & Server Components
- Under 2kb Gzipped — smaller than Sonner
- Built-in dark & light themes
- TypeScript-first with full type safety
import { Toaster, toast } from "toastflux";
import "toastflux/styles/toast.css";
function App() {
return (
<>
<Toaster theme="dark" />
<button onClick={() => toast.success("Done! 🚀")}>
Show Toast
</button>
</>
);
}Install ToastFlux
Install toastflux using your preferred package manager. Works with npm, yarn, pnpm, and bun.
npm install toastfluxFramework Integration Guide
Learn how to use ToastFlux in your React or Next.js project. See configuration and usage examples for each framework.
Using ToastFlux in React
import { Toaster } from "toastflux";
import "toastflux/styles/toast.css";
import MyComponent from "./MyComponent";
function App() {
return (
<div className="app-container">
<Toaster position="top-right" theme="dark" />
<MyComponent />
</div>
);
}
export default App;Toast Notification Types
ToastFlux supports success, error, warning, info, and default toast types out of the box.
Toast Positioning
Display toast notifications in 6 different positions: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
API Reference
Complete API documentation for the toast() function and <Toaster /> component.