Resizable

Drag to resize panels; sketch handle on the divider.

Panel A

Panel B

Roughness1.5Lock seedAnimate

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>A</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>B</ResizablePanel>
</ResizablePanelGroup>

CLI install

npx doodleui-react add resizable

Usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "doodleui-react";

<ResizablePanelGroup direction="horizontal">\n  <ResizablePanel defaultSize={50} />\n  <ResizableHandle />\n  <ResizablePanel defaultSize={50} />\n</ResizablePanelGroup>

Props

Prop	Type	Default	Notes
withHandle	boolean	true	Sketchy grip on ResizableHandle.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.