Atoms
Resizable
Resizable panel groups with drag handles.
shadcn/uiBased on shadcn/ui with Formance brand styling.
Installation#
npx shadcn@latest add @formance/resizableInstall the following dependencies:
npm install react-resizable-panels lucide-reactCopy 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>