OverflowGuard is a small open-source tool for building content-aware responsive UI.
Media queries respond to the viewport. Container queries respond to the parent. But dynamic toolbars, navbars, translated labels, permission-based actions, and “read more” blocks often need a different question:
What should happen when this content no longer fits?
OverflowGuard detects overflow and lets you swap to an alternative style or fallback UI exactly when content stops fitting.
Use it to:
- collapse navbars into menus
- remove labels from toolbar buttons
- show “read more” only when text overflows
- build greedy navigation patterns
- avoid guessing hard-coded pixel breakpoints
It comes in two flavors:
- overflow-guard-react for React apps
- overflow-guard-html as a framework-agnostic custom element
It is free, open source, TypeScript-based, and designed to be small enough to drop into existing UI without rewriting your layout.
