Dialog and Toast System
Modals and toasts you can trigger from anywhere, accessibly.
IntermediateWeb appUI component12–24hAI-buildable 4/5no setup
A reusable overlay system: portal rendering, focus trapping, scroll locking, stacked dialogs, and an imperative API you can call from any function. The accessibility requirements — focus trap, restore, escape, inert background — are where most implementations fall short.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Dialogs render through a portal above all content
- Focus is trapped inside an open dialog and restored on close
- Escape closes the topmost dialog only
- Background scroll locks without the page shifting
- Stacked dialogs layer correctly
- A promise-based confirm can be awaited from any function
- Toasts stack, auto-dismiss and can be dismissed manually
The interesting part
- Focus trapping that handles dynamically added content
- Scroll locking without layout shift from the disappearing scrollbar
- An imperative API that works outside the React tree
Once it works
- Add an undo action embedded in a toast
- Add drawer and sheet variants sharing the same core
- Add reduced-motion-aware transitions
Suggested stack
reacttypescripttailwindframer-motion