Resizable

Horizontal

Drag the separator or use the left/right arrow keys when it has focus. Optionally withHandle for a visual grip.

Left panel

Right panel

tsx

import { Resizable } from "~/components/ui/base/resizable";

<Resizable.PanelGroup
  direction="horizontal"
  defaultSplit={40}
  class="h-52 rounded-lg border border-separator-opaque/40"
>
  <Resizable.Panel side="start" minSize={15} class="bg-surface-raised p-4">
    <p class="text-callout text-label">Left panel</p>
  </Resizable.Panel>
  <Resizable.Handle withHandle />
  <Resizable.Panel side="end" minSize={15} class="bg-surface-overlay p-4">
    <p class="text-callout text-label">Right panel</p>
  </Resizable.Panel>
</Resizable.PanelGroup>

Vertical

direction="vertical" — row-resize cursor, up/down keys. withHandle adds a visual grip.

Top part

Bottom part

tsx

import { Resizable } from "~/components/ui/base/resizable";

<Resizable.PanelGroup
  direction="vertical"
  defaultSplit={35}
  class="h-72 max-w-md rounded-lg border border-separator-opaque/40"
>
  <Resizable.Panel side="start" minSize={10} class="bg-surface-raised p-3">
    <p class="text-caption-1 text-secondary-label">Top part</p>
  </Resizable.Panel>
  <Resizable.Handle withHandle />
  <Resizable.Panel side="end" minSize={15} class="bg-surface-overlay p-3">
    <p class="text-caption-1 text-secondary-label">Bottom part</p>
  </Resizable.Panel>
</Resizable.PanelGroup>

Metadata

Source: meta.generated.json (see npm run generate)

File base/resizable/meta.generated.json not found or path not allowed.