ns-ui
Split-pane divider that carries real weight: drag it and the boundary trails the pointer like a counterweighted window sash, release with speed and it coasts into the nearest detent on a critically-damped spring; released slow and far from a stop, it just stays put.
Use when a resizable split where the divider should carry weight, trailing the pointer like a counterweighted sash and coasting into the nearest detent when released with speed but staying put when released slow and far from a stop; pick drawer-counterweight instead when the panel is an overlay drawer rather than a pane in the layout, or view-toggle-rails when the layout should switch between arrangements rather than be resized.
Install
npx shadcn add https://design.helpmarq.comns-ui / split-pane-weighted — drag has weight, release finds a rail
Explorer
Preview
drag either rail fast, or nudge it with Arrow keys — Enter jumps to 50/50
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation? | Orientation | — | "vertical" = a vertical divider splitting left/right panes (default). "horizontal" = a horizontal divider splitting top/bottom panes. |
| start | React.ReactNode | — | the leading (left / top) pane's content |
| end | React.ReactNode | — | the trailing (right / bottom) pane's content |
| value? | number | — | controlled: the start pane's share of the container, as a percentage |
| defaultValue? | number | — | — |
| onValueChange? | (percent: number) => void | — | — |
| min? | number | — | percentage clamp for the divider's travel |
| max? | number | — | — |
| detents? | number[] | — | percentages the divider settles toward on a decisive release, Shift+Arrow, or Enter/double-click's 50/50 fallback |
| ariaLabel? | string | — | accessible name for the divider |
| className? | string | — | — |