Layout playground
A playground for the layout primitives. Pick an example to inspect how it's wired up.
- shadcn/ui · resizable sidebar
Official shadcn sidebar-07 (Base UI) with team switcher, collapsible nav, and project menus — driven by Panel resize and icon-rail collapse.
- 3 Panel
Resizable left & right panels with a flexible middle. Each side panel demotes to a sheet when the container — not the viewport — is too narrow, its state surviving the swap.
- 4 Panel · IDE
IDE layout: explorer · (editor splits / terminal) · inspector. Open files as peer panels in the center group; closing one hands its space back.
- 4 Vertical · email-app
Four columns side-by-side: nav · list · main · inspector. Nav & inspector demote to sheets when the container narrows; the list stays inline.
- Stress test · nested grid
Rows that collapse up/down, cells that collapse left/right, and a row of 2×2 sub-panel groups — all driven by an auto-toggler that randomly opens and closes them. Live FPS, JS-heap, and open-count monitors; push the rate and batch sliders to find the layout engine's ceiling.