A component that allows users to resize elements by dragging handles.
The Resizable is a copy-paste component in the Layout collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';23export function ResizableDemo() {4 return (5 <ResizablePanelGroup6 direction="horizontal"7 className="min-h-[200px] max-w-md rounded-lg border"8 >9 <ResizablePanel defaultSize={50}>10 <div className="flex h-full items-center justify-center p-6">11 <span className="font-semibold">Sidebar</span>12 </div>13 </ResizablePanel>14 <ResizableHandle withHandle />15 <ResizablePanel defaultSize={50}>16 <div className="flex h-full items-center justify-center p-6">17 <span className="font-semibold">Content</span>18 </div>19 </ResizablePanel>20 </ResizablePanelGroup>21 );22}
Different visual and behavioral variants of the component
Side-by-side 50/50 resizable panels with minimum size constraints.
A product byＭＵＨＩＬＡＮ and Team❤️.
