# Split Panes

Resizable panes that follow the pointer exactly, snap into an icon rail when dragged past their minimum, and fold on their own when the container gets small.

- Page and source: https://uibrik.com/components/split-panes
- Install: `npx shadcn@latest add https://uibrik.com/r/split-panes.json`
- Packages (installed by the CLI): motion
- Import: `import { SplitPanes } from "@/components/uibrik/split-panes/split-panes"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| autoCollapse | `boolean` | `true` | Fold collapsible panes, first to last, when the container is too small for every pane's minimum. |
| grip | `boolean` | `true` | Show a grip on the divider while it's hovered or dragged. |
| step | `number` | `16` | Arrow-key step. Shift moves five times as far. |
| children | `<SplitPane>[]` |  | Panes, in order. The one without a defaultSize fills the rest. |
| SplitPane | `{ id; defaultSize?; minSize?; maxSize?; collapsible?; collapsedSize?; defaultCollapsed?; children: ReactNode \| ({ collapsed }) => ReactNode }` |  | Sizes in px. collapsedSize is a rail width, or 0 to hide the pane. Children can be a function of the collapsed state. |
| direction | `"horizontal" \| "vertical"` | `"horizontal"` | Side by side or stacked. Nest a second SplitPanes for both. |
| autoSaveId | `string` |  | Saves sizes and collapsed panes in localStorage under this key. |
| onLayoutChange | `(layout) => void` |  | Runs when a drag, key press or double-click settles, with { [id]: { size, collapsed } }. |
| ref | `Ref<{ collapse; expand; toggle; resize; getLayout }>` |  | Drive panes from your own buttons and shortcuts. |
| className | `string` |  | Classes for the container. |