Command Menu

Search documentation, components, and switch theme.

Atoms

Resizable

Resizable panel groups with drag handles.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/resizable

Install the following dependencies:

npm install react-resizable-panels lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples#

With Handle#

Vertical#