Density

ResizeRail

ResizeRail uses a persistent 1px-wide vertical wrapper with a border-colored background and a 3px target that straddles the panel boundary. It is a visual affordance only: it does not resize panels, receive focus, or provide pointer or keyboard resizing today.

Sidebar
Content
import { Panel, ResizeRail, View } from "density-base-ui";

export default function ResizeRailExample() {
  return (
    <View
      align="stretch"
      gap="none"
      orientation="horizontal"
      padding={false}
      style={{ height: "10rem" }}
    >
      <Panel border="border" style={{ flex: "1 1 0" }}>
        Sidebar
      </Panel>
      <ResizeRail />
      <Panel border="border" style={{ flex: "1 1 0" }}>
        Content
      </Panel>
    </View>
  );
}

Orientation

The default vertical rail separates side-by-side panels. Use orientation="horizontal" between stacked panels.

Header
Content
import { Panel, ResizeRail, View } from "density-base-ui";

export default function ResizeRailOrientationExample() {
  return (
    <View
      align="stretch"
      gap="none"
      padding={false}
      style={{ height: "10rem" }}
    >
      <Panel border="border" style={{ flex: "1 1 0" }}>
        Header
      </Panel>
      <ResizeRail orientation="horizontal" />
      <Panel border="border" style={{ flex: "1 1 0" }}>
        Content
      </Panel>
    </View>
  );
}