Stalk UI

Component

Resizable

Splits a layout into panels a user can resize by dragging.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/resizable

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div
  style={{
    blockSize: 200,
    border: '1px solid var(--colors-border-default)',
    borderRadius: 8,
    inlineSize: 420,
    overflow: 'hidden',
  }}
>
  <Resizable direction="horizontal">
    <Resizable.Panel defaultSize={50}>
      <div
        style={{
          alignItems: 'center',
          blockSize: '100%',
          display: 'flex',
          justifyContent: 'center',
          padding: 16,
        }}
      >
        One
      </div>
    </Resizable.Panel>
    <Resizable.Handle withHandle />
    <Resizable.Panel defaultSize={50}>
      <div
        style={{
          alignItems: 'center',
          blockSize: '100%',
          display: 'flex',
          justifyContent: 'center',
          padding: 16,
        }}
      >
        Two
      </div>
    </Resizable.Panel>
  </Resizable>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`withHandle``boolean`No-Render a visible grip affordance centered on the handle.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/resizable.json`
  • Recipe: `resizable`
  • Files: `src/components/ui/resizable.tsx`