Resizable Layout

A resizable and collapsible layout built with react-resizable-panels. It offers smooth animations, saves panel sizes to cookies, and stays consistent after refresh.

Details

This layout shows how to build collapsible, animated panels that remember their size and state. It helps developers struggling with react-resizable-panels animations.

It uses server-side rendering to avoid hydration mismatches and stores panel sizes in cookies for persistence. Panels are collapsible and controllable from anywhere in the tree.

The code is open source and can be installed via the shadcn CLI. It's well-documented and ready for reuse in other projects.


Tech Stacks

Role

Frontend Developer

Team

H

Timeline

August 2025 - Ongoing