Components
Splitter A resizable panel divider for creating adjustable split layouts.
Splitter creates a resizable split layout where users can drag a divider to resize adjacent panels. Supports horizontal and vertical orientations with min/max constraints.
< Splitter > < Splitter.Panel minSize = { 20 }> < nav >Sidebar content</ nav > </ Splitter.Panel > < Splitter.Handle /> < Splitter.Panel > < main >Main content</ main > </ Splitter.Panel > </ Splitter > < Splitter orientation = "vertical" > < Splitter.Panel >< Editor /></ Splitter.Panel > < Splitter.Handle /> < Splitter.Panel >< Preview /></ Splitter.Panel > </ Splitter > Key Action ArrowLeft/RightResize panels (horizontal) ArrowUp/DownResize panels (vertical) HomeCollapse to minimum EndExpand to maximum
Handle has role="separator" with aria-orientation
aria-valuenow reflects current position
Prop Type Default Description orientation'horizontal' | 'vertical''horizontal'Split direction childrenReactNode— Panels and handles
Prop Type Default Description defaultSizenumberEqual distribution Initial size (%) minSizenumber10Minimum size (%) maxSizenumber90Maximum size (%) collapsiblebooleanfalseAllow full collapse
Component When to Use Instead Grid Fixed grid layout Stack Non-resizable linear layout