feat: add Splitter component#10425
Merged
segunadebayo merged 38 commits intochakra-ui:mainfrom Nov 19, 2025
Merged
Conversation
🦋 Changeset detectedLatest commit: 56869b2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Merged
isBatak
pushed a commit
to isBatak/chakra-ui
that referenced
this pull request
Mar 5, 2026
* feat: add splitter slot recipe for resizable panels and triggers * fix: refactor Splitter examples for panels and orientation * feat: add new Splitter components * feat: add SplitterExplorer component * feat: add new composition 'splitter' with Splitter component * style: remove unnecessary colorScheme property from Buttons * docs: update component documentation for multiple panels * feat: add collapsible panels to Splitter component * fix: remove explicit type declaration in useState * refactor: remove unused code for splitter variants * fix: remove unnecessary comment use client from files * feat: add SplitterWithKeyboardResize example * fix: add padding to Splitter.Panel components * docs: update keyboard resize example tab name in splitter component * fix: clean up splitter examples * style: adjust gap and alignment in splitterSlotRecipe * feat: add SplitterNested component * style: remove unnecessary height and width properties in splitter * feat: add SplitterDisabled example and theme recipe * feat: add SplitterWithStorage component * refactor: remove unnecessary generic type in useLocalStorage * refactor: rename component SplitterWithKeyboardResize * docs: add keyboard resizing instructions for Splitter * style: update minH value to 80 in splitter examples * feat: add SplitterConditional component * feat: add minH prop to Splitter components * docs: remove SplitterComposition example * refactor: recipe and examples * style: update example tabs names in splitter.mdx * fix: correct typo in SplitterMultiplePanels function name * docs: update * chore: more examples * docs: add changeset --------- Co-authored-by: Segun Adebayo <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Description
This PR adds a new
splitterpackage and its corresponding slot recipe definitions to the Chakra system.The splitter provides a flexible layout primitive that enables resizable panels with both horizontal and vertical orientations, built on top of the Ark UI splitter logic and fully integrated with Chakra’s styled-system.
⛳️ Current behavior (updates)
Previously, Chakra did not include a dedicated
Splittercomponent for creating adjustable panel layouts.Developers had to rely on custom CSS or third-party solutions to achieve resizable panel behavior.
🚀 New behavior
Introduced a new
@chakra-ui/reactSplitter component built around the Ark UI splitter primitives.Added support for:
minSize,maxSize, and controlledsizepropsAdded a
splitterSlotRecipein the styled-system for consistent theming integration with Chakra components.💣 Is this a breaking change?
No.
This is an additive feature — it introduces new components and recipe definitions without affecting existing APIs.
📝 Additional Information