Menus & 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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ResizableDefault layout:inline style:resizable {
  aria-label:"Panels"
  label "Panels"
  text "One"
  text "Two"
}

page "/audit/resizable/default" type:custom {
  use ResizableDefault
}

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`.

ResizablePanelGroupProps

Extends ComponentProps<typeof ResizablePrimitivePanelGroup>

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	—	—
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ResizablePanelProps

Extends ComponentProps<typeof ResizablePrimitivePanel>

Prop	Type	Default	Description
`defaultSize`	`number`	—	—
`minSize`	`number`	—	—
`maxSize`	`number`	—	—
`collapsible`	`boolean`	—	—
`children`	`ReactNode`	—	Contents of the component.