v2.0 — Now with stacking & themes

popt

Beautiful toast notifications with pill-to-card animations, spring physics, and zero dependencies.

~10 KB
JS min
~8 KB
CSS min
0
Dependencies
TS
Ready
npm
$ npm install poptjs
Playground

Try every toast

Click any card below. Change the theme and position to see how it adapts.

Output
Ready. Click a toast above.
Usage

Simple by design

One import. One function call. That's it.

Basic 1 line
popt.success('Event saved!')

popt.error({
  title: 'Payment declined',
  description: 'Card ending in 4242.'
})
Confirm async
const ok = await popt.confirm({
  title: 'Delete item?',
  confirmText: 'Delete',
  cancelText: 'Keep it'
})
// ok === true or false
Promise auto
popt.promise(fetch('/api/book'), {
  loading: 'Booking...',
  success: 'Confirmed!',
  error: 'Failed'
})
Theme config
popt.init({
  theme: 'light',  // dark | light | auto
  position: 'bottom-right',
  maxToasts: 5
})
Features

Everything included

No config needed. No extra packages. Just works.

Pill to card
Starts compact, morphs into full card with spring physics.
Toast stacking
Multiple toasts at once with configurable max limit.
Confirm & Prompt
Async dialogs with accept/cancel. Returns Promise.
Dark & Light
Three themes: dark, light, auto. Follows system preference.
Swipe dismiss
Touch gesture on mobile. Swipe horizontally to close.
Promise toast
Loading, success, error states from any async operation.
Zero dependencies
Vanilla JS. No framework. No runtime. Just works.
TypeScript
Full type definitions. IntelliSense out of the box.
ESM + UMD + CDN
Works everywhere. Bundlers, script tags, unpkg, jsdelivr.