Resizable

A split view: panels with dividers to drag, like Mail's message list and preview.

@cupertinoui/resizableRegistry JSON

Mailboxes

Messages

Message

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

// Mail's layout: mailboxes, the message list and the message.
export default function ResizableDemo() {
  return (
    // The group fills its parent, so the parent sets the size.
    <div className="h-56 w-full max-w-xl overflow-hidden rounded-[12px] bg-mac-content text-mac-body shadow-[0_0_0_1px_var(--mac-grid)]">
      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize="25%" minSize="15%">
          <div className="flex h-full w-full items-center justify-center bg-mac-fill-quaternary text-mac-label-secondary">Mailboxes</div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="35%" minSize="20%">
          <div className="flex h-full w-full items-center justify-center text-mac-label-secondary">Messages</div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="40%">
          <div className="flex h-full w-full items-center justify-center text-mac-label-secondary">Message</div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/resizable

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="30%">…</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>…</ResizablePanel>
</ResizablePanelGroup>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

ResizableHandle

Prop	Type	Description
`withHandle`	`boolean` Default: `false`	Shows a grip on the divider.
`className`	`string`	Extra classes, merged with the component's own.

ResizablePanelGroup / ResizablePanel

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.