ResizePanel

Two-panel workspace with pointer resizing, separator semantics, and complete arrow and edge keyboard controls.

InterfaceSource ready5 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/resize-panel.json
Interactive preview
Interface

Workspace

Primary panel

Resize without losing keyboard control.

Inspector

44% available

Install with the CLI

# adds ResizePanel to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/resize-panel.json

Or install the package

// npm install @uigrids/react-ui
import { ResizePanel } from '@uigrids/react-ui'

export default function App() {
  return <ResizePanel />
}

Props

PropTypeDefaultDescription
defaultSizenumber56Configures the default size option.
minnumber24Configures the min option.
maxnumber76Configures the max option.
stepnumber4Configures the step option.
classNamestring''Additional CSS classes for the outer element.