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.