Home

Javka

Dithered Toast Library for React & Next.js

July 2026
Completed
TypeScript

A lightweight, zero-dependency toast library for React and Next.js with a dithered block countdown.

Source0
What
A lightweight, zero-dependency toast library for React and Next.js with a dithered block countdown that drains as each toast's timer runs out.
Why
Wanted a toast library with a distinct look, themeable down to the pixel with plain CSS variables, without needing Tailwind, ShadCN or Motion as dependencies.
Result
A published package with a `<Toaster />` and `toast()` API, per-toast dismiss, hover-to-fan-out stacking, and full theming through CSS variables.
Toasts stacking, fanning out on hover, and draining their dithered countdown

The problem

Most toast libraries either ship a specific design language you have to fight, or pull in Tailwind, ShadCN or an animation library just to render a notification. I wanted something with zero dependencies that looked distinct out of the box and could still be retheamed completely without touching component code.

The approach

Javka is plain TypeScript, CSS and React - no Tailwind, no ShadCN, no Motion. Every visual detail routes through a CSS variable, from colours and radius down to the block countdown's height and fade. The countdown itself is a grid of dithered blocks that drains as a toast's timer runs out, instead of the usual progress bar. Hovering the stack fans the toasts out and pauses every timer at once.

The result

A published package: mount <Toaster /> once and call toast(), toast.success(), toast.error(), toast.warning() or toast.info() from anywhere. Each toast carries a title, optional description, configurable duration, and returns an id for manual dismissal. Positioning, stack gap, peek height, and the countdown grid's rows and columns are all configurable on the <Toaster /> itself.