Notifications that feelnative to your product.
Lightweight, accessible toast notifications for React, Next.js, Remix and Vite. Typed APIs, adaptive themes and expressive motion—with no animation runtime.
Click to try live
Everything you need
Built for developers who care about user experience
High Performance
Zustand-powered state management with surgical re-renders. Only the component that changed updates.
Fully Customizable
Themes, animations, positions, styles, custom components — every pixel is configurable.
Accessibility First
ARIA roles, live regions, keyboard navigation, and screen reader support built in by default.
TypeScript Native
Full type safety with auto-complete. Written entirely in TypeScript with exported types for every API.
SSR & Next.js Ready
Works with Next.js App Router, Pages Router, Remix, Vite, and modern React frameworks.
Plugin System
Extend with custom plugins. Hook into create, update, and dismiss lifecycle events.
Up and running in minutes
Install, wrap your app with ToastProvider, and call toast() from anywhere in your application.
Install
npm install react-toast-kit
# or
pnpm add react-toast-kit
# or
yarn add react-toast-kitUsage
1import { ToastProvider, toast } from 'react-toast-kit';
2
3// 1. Wrap your app with ToastProvider
4function App() {
5 return (
6 <ToastProvider>
7 <YourApp />
8 </ToastProvider>
9 );
10}
11
12// 2. Call toast() from anywhere
13toast.success('Saved successfully!');
14toast.error({ title: 'Error', description: 'Something went wrong.' });
15toast.promise(fetchData(), {
16 loading: 'Loading...',
17 success: (data) => `Got ${data.length} items`,
18 error: (err) => `Error: ${err.message}`,
19});Interactive Playground
Configure and test every feature live
Basic Variants
Position
Theme
Ready to add great toasts to your app?
Join developers who choose React Toast Kit for its performance, accessibility, and developer experience.
npm install react-toast-kit