---
title: Resizable
description: A component that allows users to resize elements by dragging handles.
---
## Installation
CLI
Manual
```bash
npx lightswind@latest add resizable
```
Copy and paste the following code into your project.
```tsx
import * as React from "react"
import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/components/lib/utils"
const ResizablePanelGroup = ({
className,
...props
}: React.ComponentProps) => (
)
const ResizablePanel = ResizablePrimitive.Panel
interface ResizableHandleProps
extends React.ComponentProps {
withHandle?: boolean
variant?: "default" | "pill" | "glow" | "ghost"
}
const ResizableHandle = ({
withHandle = false,
variant = "default",
className,
...props
}: ResizableHandleProps) => (
div]:rotate-90",
variant === "glow" && "hover:shadow-[0_0_8px_rgba(99,102,241,0.6)]",
variant === "ghost" && "bg-transparent hover:bg-zinc-300 dark:hover:bg-zinc-700",
className
)}
{...props}
>
{withHandle && (
)}
)
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
```
## Usage
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';
```
```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/lightswind/resizable';
export function ResizableDemo() {
return (
Sidebar
Content
);
}
```