Resizable

Import

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@retents/ui/resizable"

Usage Guidelines

When to use

• For split-pane layouts where users need to adjust the proportion of two or more panels (e.g., code editor + preview, sidebar + content).
• When users benefit from controlling how much space each section occupies.

When NOT to use

• For fixed sidebar layouts — use CSS grid or flex layout with a fixed width instead.
• For overlaying content — use Sheet or Dialog.
• For responsive layouts that adapt to screen size — use CSS breakpoints.

Preview

Usage

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

Peer dependencies

This component requires: react-resizable-panels

Source