SplitPane

API reference and demos for SplitPane.

Source

Import

import { SplitPane } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Custom Split · Open in Storybook

Explorer With Varying Detail · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	Classes applied to the root split container.
defaultSplit	number	50	Initial left-pane width as a percentage.
left*	ReactNode	—	Content rendered in the left pane.
leftClass	string	—	Classes applied to the left pane.
minLeft	number	20	Minimum left-pane width as a percentage.
minRight	number	20	Minimum right-pane width as a percentage.
mobilePane	enum	—	With `stackOnMobile`, pages the narrow split instead of stacking it: only this pane renders, at full height, and the other appears again once the split is 48rem wide. A list/detail host sets it from its selection.
right*	ReactNode	—	Content rendered in the right pane.
rightClass	string	—	Classes applied to the right pane.
stackOnMobile	boolean	false	Stack the panes and hide the resize handle while the split's own width is below 48rem (the `md` breakpoint) — a container query, so a split nested in a narrow column stacks even on a wide screen.