Toast notifications that just whisper into place
A lightweight toast library for React and Next.js. Trigger notifications from anywhere with a simple global API — no hooks, no refs, no providers.
npm install whisp-toastimport { whisp } from 'whisp-toast'
whisp.success('Successfully saved!')whisp.error('Something went wrong')whisp.info('You have a new notification')whisp.alert('Attention required')Fire a real toast, right now
These buttons call the actual whisp-toast library running on this page. Pick a position and try every variant.
top-centerPick a corner, then fire a toast from the panel. The mounted <Whisper /> component renders every notification through a single portal.
Everything you need, nothing you don't
whisp-toast focuses on a tiny surface area with sensible defaults, so you can add polished notifications in minutes.
Zero dependencies
Lightweight and framework-friendly. Nothing extra bloating your bundle — just the toast logic you need.
Global API
Fire toasts from components, event handlers, async functions, and utilities. No hooks, refs, or providers required.
CSS variable theming
Fully customizable colors, borders, and radius through CSS variables. Override them globally with a single :root block.
Custom icons
Built-in SVG icons per type, or pass any ReactNode — emoji, string, SVG, or an icon library — per toast.
Flexible positioning
Six screen positions supported, from top-left to bottom-right, so toasts land exactly where you want them.
TypeScript first
A fully typed API and components, optimized for React and Next.js out of the box. All public types are exported.
Up and running in two steps
Mount the Whisper component once, then call whisp from anywhere.
import { Whisper } from 'whisp-toast'
export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( <html lang="en"> <body> {children} <Whisper position="bottom-right" /> </body> </html> )}Themeable with CSS variables
No configuration required — sensible defaults ship out of the box. Override any variable globally to match your brand.
:root { --whisp-bg: #1a1a1a; --whisp-text: #f5f5f5; --whisp-border: rgba(255, 255, 255, 0.08); --whisp-radius: 10px;
--whisp-success-bg: #22c55e; --whisp-error-bg: #ef4444; --whisp-info-bg: #3b82f6; --whisp-alert-bg: #f59e0b;}| Variable | Description | Default |
|---|---|---|
| --whisp-bg | Toast background | #1a1a1a |
| --whisp-text | Text color | #f5f5f5 |
| --whisp-border | Toast border | rgba(255,255,255,0.08) |
| --whisp-radius | Border radius | 10px |
| --whisp-success-bg | Success icon | #22c55e |
| --whisp-error-bg | Error icon | #ef4444 |
| --whisp-info-bg | Info icon | #3b82f6 |
| --whisp-alert-bg | Alert icon | #f59e0b |