Updated
Split Panes
NewCustomize
Step16px
Installation
npx shadcn@latest add https://uibrik.com/r/split-panes.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/split-panes/split-panes.tsx"use client"; import { animate, motion, motionValue, useReducedMotion, type AnimationPlaybackControls, type MotionValue } from "motion/react"; import { Children, Fragment, isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode, type Ref, } from "react"; import { cn } from "@/lib/utils"; export type SplitPaneState = { collapsed: boolean }; export type SplitPaneProps = {
Adds the files to
components/uibrik/split-panes and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/split-panes.Usage
import { SplitPanes } from "@/components/uibrik/split-panes/split-panes";<SplitPanes autoCollapse grip step={16} direction="horizontal" onLayoutChange={(layout) => {}} // SplitPane={{ id: …, children: <…/> }} // autoSaveId="…"> <SplitPane id="nav" defaultSize={208} minSize={168} collapsible collapsedSize={60}> {({ collapsed }) => <Nav compact={collapsed} />} </SplitPane> <SplitPane id="main">Content</SplitPane></SplitPanes>Props
SplitPanes- autoCollapse
- Type boolean
- true
- Fold collapsible panes, first to last, when the container is too small for every pane's minimum.
- grip
- Type boolean
- true
- Show a grip on the divider while it's hovered or dragged.
- step
- Type number
- 16
- Arrow-key step. Shift moves five times as far.
- childrenrequired
- Type <SplitPane>[]
- –
- Panes, in order. The one without a defaultSize fills the rest.
- SplitPane
- Type { 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
- Type "horizontal" | "vertical"
- "horizontal"
- Side by side or stacked. Nest a second SplitPanes for both.
- autoSaveId
- Type string
- –
- Saves sizes and collapsed panes in localStorage under this key.
- onLayoutChange
- Type (layout) => void
- –
- Runs when a drag, key press or double-click settles, with { [id]: { size, collapsed } }.
- ref
- Type Ref<{ collapse; expand; toggle; resize; getLayout }>
- –
- Drive panes from your own buttons and shortcuts.
- className
- Type string
- –
- Classes for the container.
