Resizable

Resizable panel groups and panels for building flexible layouts.

Basic Usage

Horizontal panels

Sidebar

Content

Vertical panels

Header

Content

Three panels

Nav

Editor

Properties

Nested panels (IDE layout)

Explorer

Editor

Terminal

Resizable PanelsDrag handles to resize panels

Installation

pnpm add @corew500/ui

Usage

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@mordecai-design-system/ui"

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>Panel 1</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Panel 2</ResizablePanel>
</ResizablePanelGroup>

Examples

Horizontal Layout

<ResizablePanelGroup direction="horizontal" className="min-h-[200px]">
  <ResizablePanel defaultSize={25}>
    <Sidebar />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={75}>
    <Content />
  </ResizablePanel>
</ResizablePanelGroup>

Vertical Layout

<ResizablePanelGroup direction="vertical" className="min-h-[400px]">
  <ResizablePanel defaultSize={30}>
    <Header />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={70}>
    <Content />
  </ResizablePanel>
</ResizablePanelGroup>

Three Panels

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={20} minSize={15}>
    <Navigation />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={60}>
    <Editor />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={20} minSize={15}>
    <Properties />
  </ResizablePanel>
</ResizablePanelGroup>

With Handle Indicator

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>Left</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>Right</ResizablePanel>
</ResizablePanelGroup>

Nested Panels

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={25}>
    <Sidebar />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel defaultSize={70}>
        <Editor />
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={30}>
        <Terminal />
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

Props

ResizablePanelGroup

Prop	Type	Default	Description
`defaultLayout`	Layout	—	Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Refer to the documentation for how to avoid layout shift when using server components.
`disableCursor`	enum	—	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.
`disabled`	enum	—	Disable resize functionality.
`elementRef`	enum	—	Ref attached to the root `HTMLDivElement`.
`groupRef`	enum	—	Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
`onLayoutChange`	(layout: Layout) => void	—	Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
`onLayoutChanged`	(layout: Layout) => void	—	Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api.
`orientation`	enum	—	Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"

ResizablePanel

Prop	Type	Default	Description
`collapsedSize`	enum	—	Panel size when collapsed; defaults to 0%.
`collapsible`	enum	—	This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
`defaultSize`	enum	—	Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.
`elementRef`	enum	—	Ref attached to the root `HTMLDivElement`.
`maxSize`	enum	—	Maximum size of Panel within its parent group; defaults to 100%.
`minSize`	enum	—	Minimum size of Panel within its parent group; defaults to 0%.
`onResize`	(panelSize: PanelSize, id: string \| number, prevPanelSize: PanelSize) => void	—	Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount)
`panelRef`	enum	—	Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.

ResizableHandle

Prop	Type	Default	Description
`elementRef`	enum	—	Ref attached to the root `HTMLDivElement`.
`withHandle`	enum	—	—