A persistent top bar that shows which CSS breakpoint is active while you resize. Supports Tailwind, Bootstrap, MUI, Chakra UI, and custom presets.
| Breakpoint | Tailwind CSS | Bootstrap | Material UI | Chakra UI |
|---|---|---|---|---|
| xs | 0px | 0px | 0px | — |
| sm | 640px | 576px | 600px | 0px |
| md | 768px | 768px | 900px | 480px |
| lg | 1024px | 992px | 1200px | 768px |
| xl | 1280px | 1200px | 1536px | 992px |
| 2xl | 1536px | 1400px | — | 1280px |
A slim, always-visible bar at the top of every page showing the current active breakpoint name (xs, sm, md, lg, xl, 2xl).
FREESee the exact pixel width and height of the viewport in real time, right in the bar. No more guessing.
FREEBuilt-in Tailwind CSS breakpoints (640, 768, 1024, 1280, 1536). One click to activate.
FREEBuilt-in Bootstrap 5 breakpoints (576, 768, 992, 1200, 1400). Switch presets instantly.
FREEEach breakpoint gets a unique color. Spot the current breakpoint at a glance with the visual ruler.
FREEToggle the bar on and off with Ctrl+Shift+B (Cmd+Shift+B on Mac). Stay in your flow.
FREEDefine your own breakpoint names and pixel values. Match your project's exact design tokens.
PROPre-configured breakpoints for Material UI and Chakra UI. Covers all major CSS frameworks.
PROGet a subtle toast notification every time the breakpoint changes while resizing. Never miss a transition.
PROFull log of every breakpoint change with timestamps and dimensions. Replay your resize sessions.
PROVisualize your column grid directly on the page. Configurable columns, gap, and max-width.
PROExport your breakpoint configuration and grid settings as a JSON file. Share with your team.
PRO