Splitter

An unstyled resizable panel layout component with pointer and keyboard-driven sizing.

Build fully custom resizable panel layouts with complete control over layout and styling.

Panel 1

Panel 2

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Splitter with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Panel, Gutter, Thumb
Pointer-based drag resizing with configurable step for keyboard arrow keys
Panel constraints via minSize, maxSize, collapsible, and collapsedSize
Nested splitter support for complex multi-directional layouts

Usage#

import { Splitter } from 'primereact/splitter';

<Splitter.Root>
    <Splitter.Panel></Splitter.Panel>
    <Splitter.Gutter>
        <Splitter.Thumb />
    </Splitter.Gutter>
    <Splitter.Panel></Splitter.Panel>
</Splitter.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Splitter.Root as="section">
    <Splitter.Panel as="main">...</Splitter.Panel>
</Splitter.Root>

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<Splitter.Panel>{(instance) => <div>{instance.props.minSize}</div>}</Splitter.Panel>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Panel 1

Panel 2

/* Select a part to see its CSS selector for custom styling */

API#

SplitterRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SplitterRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SplitterRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SplitterRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SplitterRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SplitterRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`panels`	`useSplitterPanelConfig[]`	—
Declarative panel configuration array. When provided, the hook auto-registers panels from this config — no `registerPanel` calls needed. Each entry defines constraints for the panel at that index.
`sizes`	`number[]`	—
Controlled panel sizes as percentages (must sum to ~100). When provided, the splitter operates in controlled mode — sizes are driven by this prop and should be updated via onResize or onResizeEnd callbacks.
`defaultSizes`	`number[]`	—
Default initial panel sizes as percentages (must sum to ~100). Used for uncontrolled mode — sets the initial sizes on mount, after which internal state takes over.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Orientation of the panels.
`disabled`	`boolean`	`false`
When true, disables all resize interactions.
`step`	`number`	`5`
Step factor to increment/decrement the size of the panels while pressing the arrow keys.
`onResizeStart`	`(event: SplitterRootResizeStartEvent) => void`	—
Callback invoked when resize starts.
`onResize`	`(event: SplitterRootResizeEvent) => void`	—
Callback invoked during resize with current panel sizes.
`onResizeEnd`	`(event: SplitterRootResizeEndEvent) => void`	—
Callback invoked when resize ends.
`onCollapse`	`(event: SplitterRootCollapseEvent) => void`	—
Callback invoked when a panel collapses or expands.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-resizing`	Present during a resize operation
`data-disabled`	Present when disabled

Defines passthrough(pt) options of Splitter component.

label	type	description
root	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
panel	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the panel's DOM element.
gutter	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the gutter's DOM element.
thumb	SplitterRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the thumb's DOM element.

SplitterPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SplitterPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SplitterPanelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SplitterPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SplitterPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SplitterPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`minSize`	`number`	—
Minimum size of the element relative to 100%.
`maxSize`	`number`	—
Maximum size of the element relative to 100%.
`collapsible`	`boolean`	`false`
Whether the panel can be collapsed when resized below minSize.
`collapsedSize`	`number`	`0`
Size of the panel when collapsed, relative to 100%.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-index`	Panel index number
`data-resizing`	Present during a resize operation

Defines passthrough(pt) options of SplitterPanel component.

label	type	description
root	SplitterPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

SplitterGutter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SplitterGutterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SplitterGutterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SplitterGutterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SplitterGutterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SplitterGutterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`disabled`	`boolean`	`false`
When true, disables resize interactions for this gutter.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-resizing`	Present during a resize operation
`data-disabled`	Present when disabled

Defines passthrough(pt) options of SplitterGutter component.

label	type	description
root	SplitterGutterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

SplitterThumb#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SplitterThumbInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SplitterThumbInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SplitterThumbInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SplitterThumbPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SplitterThumbInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-resizing`	Present during a resize operation

Defines passthrough(pt) options of SplitterThumb component.

label	type	description
root	SplitterThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Splitter gutter defines separator as the role with aria-orientation set to either horizontal or vertical. Each gutter provides aria-valuenow, aria-valuemin, and aria-valuemax to communicate panel sizes. Adjacent panels are linked via aria-controls.

Keyboard Support#

Key	Function
`tab`	Moves focus through the splitter bar.
`down arrow`	Moves a vertical splitter down.
`up arrow`	Moves a vertical splitter up.
`left arrow`	Moves a horizontal splitter to the left.
`right arrow`	Moves a horizontal splitter to the right.