RadCN
Compositereadycomponentready

Resizable

A dependency-free split-panel primitive with semantic handles, keyboard resizing, pointer resizing, and nested group support.

Importimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'radcn/resizable'
Preview

Live package example

Render the four upstream Resizable examples with nested groups, grip handles, and horizontal or vertical panel layouts.

Example Parity

Render the four upstream Resizable examples with nested groups, grip handles, and horizontal or vertical panel layouts.

Preview
One
Two
Three
One
Two
Three
Sidebar
Content
Header
Content
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'radcn/resizable'

export function ResizableExamples() {
  return (
    <>
      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize={50}>One</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={50}>
          <ResizablePanelGroup orientation="vertical">
            <ResizablePanel defaultSize={25}>Two</ResizablePanel>
            <ResizableHandle />
            <ResizablePanel defaultSize={75}>Three</ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>
      </ResizablePanelGroup>

      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize={75}>Content</ResizablePanel>
      </ResizablePanelGroup>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'radcn/resizable'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • ResizableHandle renders role="separator" and enhancement adds aria-orientation, aria-valuemin, aria-valuemax, and aria-valuenow.
  • Keyboard resizing uses arrow keys, Home, End, and Shift-modified larger steps without requiring React state.
  • Pointer resizing and keyboard resizing both emit radcn-resizable-change for app-owned state or persistence.
  • Nested ResizablePanelGroup instances enhance independently so each handle owns only its direct sibling panels.

Customization

  • Resizable exposes data-radcn-resizable-panel-group, data-radcn-resizable-panel, data-radcn-resizable-handle, and data-radcn-resizable-handle-grip hooks.
  • Use class and style plus CSS variables such as --radcn-resizable-border, --radcn-resizable-bg, --radcn-resizable-panel-bg, --radcn-resizable-handle-bg, and --radcn-resizable-grip-bg.
  • Panel content remains app-owned composition; RadCN owns the panel, handle, orientation, sizing, and enhancement hooks.
  • withHandle toggles a dependency-free decorative grip without pulling icon packages into RadCN.

Remix 3 Notes

  • react-resizable-panels mechanics map to RadCN dependency-free enhanceResizable behavior and explicit host-element props.
  • defaultSize, minSize, orientation, and withHandle map to explicit RadCN props.
  • className maps to class, data-slot maps to data-radcn-resizable-* hooks, and Tailwind utilities map to class, style, CSS variables, and app CSS.
  • GripVerticalIcon and lucide-react are app-owned presentation; RadCN uses a dependency-free decorative grip.
  • Nested panel groups are supported as independent groups rather than relying on React context from upstream.
  • vendor source remains read-only evidence and is not imported by RadCN.