Skip to content

Conversation

@jaem0629
Copy link

@jaem0629 jaem0629 commented Jan 26, 2026

Fixes #9118, #9136, #9200

react-resizable-panels v4 renamed exports and changed APIs, so CLI users were getting build errors like:

error TS2339: Property 'PanelGroup' does not exist...
error TS2339: Property 'PanelResizeHandle' does not exist...

Picking up from #9124 (bvaughn's PR). He couldn't continue due to lint/test issues on main, so I applied his changes with the CSS selector fix that stevezhu pointed out in the review.

What changed

  • PanelGroupGroup, PanelResizeHandleSeparator
  • directionorientation
  • defaultSize={50}defaultSize="50%"
  • CSS: data-[panel-group-direction=vertical]aria-[orientation=horizontal] for Separator (flipped)
  • onLayoutonLayoutChange with Layout type

Testing

  • pnpm lint (passed)
  • pnpm test - 2 failures in init.test.ts, unrelated (pre-existing buttonVariants issue)
  • on web resize works, vertical/horizontal/nested all good

- Update component API: PanelGroup → Group, PanelResizeHandle → Separator
- Update prop: direction → orientation
- Update size values: number → string with units (e.g., "50%")
- Update CSS selectors: data-[panel-group-direction] → aria-[orientation]
- Update controlled component: onLayout → onLayoutChange with Layout type

Closes shadcn-ui#9118, shadcn-ui#9136, shadcn-ui#9200
@vercel
Copy link
Contributor

vercel bot commented Jan 26, 2026

@jaem0629 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@shadcn
Copy link
Collaborator

shadcn commented Jan 26, 2026

Is this a duplicate of #9433?

@jaem0629
Copy link
Author

jaem0629 commented Jan 26, 2026

@shadcn Not exactly, #9433 only updates several files and uses incorrect CSS selectors.

This PR includes the full migration: all examples, docs, and the CSS selector fix that @stevezhu pointed out in #9124.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Resizable component Broken

2 participants