v1.4 • UI • 2kb gzipped • MIT
ToastKit
Accessible toast notifications in two kilobytes, with a queue that never talks over itself.
// why toastkit
Announced correctly
Toasts land in a live region with the right politeness level, so screen reader users hear them once, in order, at the right moment.
// stack
Queue-aware
A burst of ten notifications collapses into a readable sequence instead of a stack that scrolls off screen.
ToastKit started as a single file in a client project and stayed small on purpose. It does one job, it does it in 2kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i toastkit-jsToasts land in a live region with the right politeness level, so screen reader users hear them once, in order, at the right moment.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Correct live regions
- Pauses on hover and focus
- MIT licensed, commercially friendly
Features
Correct live regions
Assertive for errors, polite for everything else. The distinction is made for you.
Pauses on hover and focus
Timers hold while a user is reading or tabbing through actions inside a toast.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Accessibility audited
Tested against screen readers on three platforms, with the findings published in the repository.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Styling stays yours
ToastKit sets no colours and no spacing. Every visual decision belongs to your design system.
Get ToastKit v1.4
4 files • .min.js 2kb • .zip 25kb • sha384 verified
Changelog
- Queue collapsing for bursts
- Timers pause on focus as well as hover
- Dropped to 2kb gzipped
- Improved error messages for invalid options
- Added twenty regression tests
- Node 18 is now the minimum supported version
- CommonJS build restored for older bundlers
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the interface today.
MIT licensed. Commercial friendly. Five-minute setup.