Navigation

Resizable

Draggable split panes for resizable layouts.

Import

tsx

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@cronus-ui/ui";

bash

npx cronus-ui add resizable

Examples

Split panes

Drag the divider to resize. A horizontal group nests a vertical one for a three-pane layout.

Sidebar

Content

Console

tsx

<ResizablePanelGroup
  direction="horizontal"
  className="h-48 max-w-2xl rounded-lg border border-border"
>
  <ResizablePanel defaultSize={35} minSize={20}>
    <div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">
      Sidebar
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={65}>
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel defaultSize={60}>
        <div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">
          Content
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={40}>
        <div className="flex h-full items-center justify-center p-4 text-sm text-fg-secondary">
          Console
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

API Reference

Generated from the component's exported types.

ResizableHandleProps

Extends ComponentProps<typeof ResizablePrimitiveHandle>

Prop	Type	Default	Description
`withHandle`	`boolean`	`false`	Render a centered grip affordance on the divider. Defaults to `false`.