Split Pane

Install

Install manually View source on GitHub

Anatomy

SplitPane
SplitPanePrimary
SplitPaneHandle
SplitPaneSecondary

Accessibility4 checks

The handle follows the WAI-ARIA window splitter pattern with role="separator", value bounds, and aria-controls.
Arrow keys resize by the step, Home and End jump to the limits, and Enter collapses or restores the primary region.
Pointer dragging uses pointer capture. The handle has a 12px hit area and a visible focus line.
onValueChange reports the proportion; an optional storageKey saves and restores it from localStorage.

Navigation and layout

Refund request #4821
Shipping delay #4819
Invoice copy #4816

Refund request #4821

The order arrived after the event date. The customer asks for a refund to the original card.

List width: 38%. Use the arrow keys, Home, End, or Enter on the divider.

Code example

usage.tsx

"use client";import { useState } from "react";import {  SplitPane,  SplitPaneHandle,  SplitPanePrimary,  SplitPaneSecondary,  type SplitPaneVariant,} from "@/components/ui/uai/split-pane";export function SplitPanePreview({ variant = "card" }: { variant?: SplitPaneVariant }) {  const [size, setSize] = useState(38);  return (    <div style={{ display: "grid", gap: 10 }}>      <SplitPane        variant={variant}        value={size}        onValueChange={setSize}        min={25}        max={70}        storageKey="uai-preview-split-pane"        style={{ height: 280 }}      >        <SplitPanePrimary>          <ul style={{ margin: 0, padding: 12, listStyle: "none", display: "grid", gap: 4 }}>            <li style={{ fontWeight: 550 }}>Refund request #4821</li>            <li style={{ color: "var(--uai-muted)" }}>Shipping delay #4819</li>            <li style={{ color: "var(--uai-muted)" }}>Invoice copy #4816</li>          </ul>        </SplitPanePrimary>        <SplitPaneHandle aria-label="Resize inbox and conversation" />        <SplitPaneSecondary>          <div style={{ padding: 16, display: "grid", gap: 8 }}>            <strong>Refund request #4821</strong>            <p style={{ margin: 0, color: "var(--uai-muted)" }}>              The order arrived after the event date. The customer asks for a refund to the original              card.            </p>          </div>        </SplitPaneSecondary>      </SplitPane>      <p style={{ margin: 0, color: "var(--uai-muted)", fontSize: 12 }}>        List width: {Math.round(size)}%. Use the arrow keys, Home, End, or Enter on the divider.      </p>    </div>  );}

Manual installation

split-pane.tsx

Loading component source…