Resizable: Size readout

showSize shows the panel before the divider while you drag or use the keyboard, in "percent" or "pixels".

Canvas

Inspector

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

export function ResizableSize() {
  return (
    <div className="h-56 w-full max-w-xl overflow-hidden rounded-xl border">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize="320px" minSize="160px" maxSize="70%">
          <div className="flex h-full items-center justify-center text-sm font-medium">
            Canvas
          </div>
        </ResizablePanel>
        <ResizableHandle showSize="pixels" />
        <ResizablePanel minSize="20%">
          <div className="flex h-full items-center justify-center text-sm font-medium">
            Inspector
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/resizable/size.tsx, together with the Resizable component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/resizable-size.json

To add only the component, follow the Resizable installation.

Props in this example

The Resizable props this example sets, from the API reference.

ResizablePanel

Prop	Type	Default
`defaultSize`	`number \| string`	`–`
`minSize`	`number \| string`	`–`
`maxSize`	`number \| string`	`–`

ResizableHandle

Prop	Type	Default
`showSize`	`boolean \| "percent" \| "pixels"`	`false`

Every prop is in the Resizable API reference.

More Resizable examples

See them all, with keyboard support and accessibility notes, on the Resizable page.