Resizable

Accessible resizable panel groups and layouts.

One

Two

Three

<ResizablePanelGroup
  orientation="horizontal"
  className="max-w-md rounded-lg border md:min-w-[450px]"
>
  <ResizablePanel defaultSize="50%">
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize="25%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="75%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Three</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

Installation

pnpm dlx cubix@latest add resizable

About

Built on react-resizable-panels for accessible, keyboard-friendly panel layouts.

Usage

Import

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/cubix/resizable"

Example

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Composition

Use the following composition to build a ResizablePanelGroup:

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Horizontal

Sidebar

Content

<ResizablePanelGroup
  orientation="horizontal"
  className="min-h-[200px] rounded-lg border"
>
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Vertical

Use orientation="vertical" for vertical resizing.

Header

Content

<ResizablePanelGroup
  orientation="vertical"
  className="min-h-[200px] rounded-lg border"
>
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Header</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Handle

The handle anchor is shown by default in the middle of the separator. Pass withHandle={false} for a plain line only.

Sidebar

Content

<ResizablePanelGroup
  orientation="horizontal"
  className="min-h-[200px] rounded-lg border"
>
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Controlled

Track panel sizes with onLayoutChange and stable id values.

30%

70%

"use client"

import * as React from "react"
import type { Layout } from "react-resizable-panels"

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/cubix/resizable"

export function ResizableControlledDemo() {
  const [layout, setLayout] = React.useState<Layout>({})

  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-[200px] rounded-lg border"
      onLayoutChange={setLayout}
    >
      <ResizablePanel defaultSize="30%" id="left" minSize="20%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">
            {Math.round(layout.left ?? 30)}%
          </span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="70%" id="right" minSize="30%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">
            {Math.round(layout.right ?? 70)}%
          </span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

API Reference

See also the react-resizable-panels documentation for additional primitive props.

ResizablePanelGroup

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the panel group layout.
onLayoutChange	(layout: Layout) => void	-	Called when panel sizes change.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	ResizablePanel and ResizableHandle elements.

ResizablePanel

Prop	Type	Default	Description
defaultSize	string \| number	-	Initial size, such as "50%" or a pixel value.
minSize	string \| number	-	Minimum size the panel can be resized to.
maxSize	string \| number	-	Maximum size the panel can be resized to.
id	string	-	Stable id used for controlled layouts and persistence.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Panel content.

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	true	Shows the centered drag anchor on the separator. Set false for a plain line.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).