Introduced autoResize prop in Panel component

[SabbeAndres]

This pull request introduces a new auto-resizing behavior for panels based on issue #675, allowing individual panels to opt out of automatic resizing when the container or window size changes.
This is achieved by adding an autoResize prop to the Panel component and updating the core layout logic to respect this setting. Panels with autoResize={false} will maintain their pixel size while other panels absorb size changes. The update also includes new documentation, types, test coverage, and example routes to demonstrate the feature.

Panel auto-resize feature:

• Added an autoResize prop to the Panel component, allowing panels to opt out of resizing when the group/container size changes. Panels with autoResize={false} keep their pixel size stable, while siblings absorb the remaining delta.
• Updated panel types (PanelProps, PanelConstraints, etc.) and internal state to support the new autoResize option.

Layout and state management:

• Modified the group mounting and layout validation logic to preserve the pixel size of panels with autoResize={false} across group size changes. This includes a new helper function, preserveNonAutoResizingPanelSizes, and updates to state propagation throughout the layout system.

Documentation and examples:

• Updated the documentation (README.md) to describe the new autoResize prop and its usage.
• Added new example routes and navigation links to demonstrate the fixed sidebar panel feature, including a new AutoResizeSidebarRoute.

Testing:

• Added a new test (mountGroup.autoResize.test.ts) to verify that panels with autoResize={false} preserve their pixel size when the group size changes.

[vercel]

@SabbeAndres is attempting to deploy a commit to the Brian Vaughn's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-resizable-panels	Ready	Preview	Feb 28, 2026 9:44pm

[bvaughn]

Hey @SabbeAndres!

Thanks a bunch for the work here and for sharing this idea 👏🏼 I think it's promising!

I'm currently wondering about what the best API approach is here to minimize potential invalid group configurations. This is something that can already happen (e.g. if a group is smaller than the sum of all of the panel's min-sizes for example) but I like to avoid introducing possible edge cases like this when there's another potential API route.

With this API, for example, I worry about the following scenario:

// What's the expected behavior if this group is resized?
<Group>
  <Panel autoResize={false} />
  <Panel autoResize={false} />
</Group>

There are more insidious versions of this (e.g. conditionally rendered panels may make this less obvious). Another example could be:

// Assume group size of 300px, left: 200px and right: 100px
// What's the expected behavior if this group gets bigger?
<Group>
  <Panel autoResize={false} id="left" />
  <Panel id="right" maxSize={200} />
</Group>

Again this sort of invalid props scenario is already possible when combining min/max pixel sizes, but it's worth thinking through a bit to make sure a new API minimizes the potential for this sort of thing.

The other ideas I'm thinking of (e.g. moving the prop to the level of the Group) aren't necessarily any better. I guess all that can be done is maybe to warn about this in the documentation.

---

Also small thing I notice is that there is some resizing happening (though it is minimal, so maybe that's okay). Presumably just rounding errors or something?

demo.mov

[bvaughn]

By the way, I am happy to pick up the branch and make the changes I suggested if you'd prefer. (I don't expect you to do anything beyond what you've already done.)

[bvaughn]

Thanks for the assist, @SabbeAndres! I'll merge and release this momentarily.

[SabbeAndres]

Nicee, thanks a lot @bvaughn !