Docs
Resizable
Resizable
A component that divides your interface into resizable sections.
import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/default/resizable";
const ResizableDemo = () => {
return (
<Resizable class="max-w-md rounded-lg border">
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-[200px] items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<Resizable orientation="vertical">
<ResizablePanel initialSize={0.5} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.5} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">C</span>
</div>
</ResizablePanel>
</Resizable>
</ResizablePanel>
</Resizable>
);
};
export default ResizableDemo;import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/solid/resizable";
const ResizableDemo = () => {
return (
<Resizable class="max-w-md rounded-lg border">
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-[200px] items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<Resizable orientation="vertical">
<ResizablePanel initialSize={0.5} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.5} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">C</span>
</div>
</ResizablePanel>
</Resizable>
</ResizablePanel>
</Resizable>
);
};
export default ResizableDemo;Installation
npx shadcn-solid@latest add resizableInstall the following dependencies:
npm install @corvu/resizableCopy and paste the following code into your project:
Install the following dependencies:
npm install @corvu/resizableCopy and paste the following code into your project:
Usage
import { Resizable, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";<Resizable>
<ResizablePanel>A</ResizablePanel>
<ResizableHandle />
<ResizablePanel>B</ResizablePanel>
</Resizable>Examples
Vertical
Use the orientation prop to set the orientation of the resizable panels.
import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/default/resizable";
const ResizableVerticalDemo = () => {
return (
<Resizable
orientation="vertical"
class="h-[200px] max-w-md rounded-lg border"
>
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
</Resizable>
);
};
export default ResizableVerticalDemo;import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/solid/resizable";
const ResizableVerticalDemo = () => {
return (
<Resizable
orientation="vertical"
class="h-[200px] max-w-md rounded-lg border"
>
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
</Resizable>
);
};
export default ResizableVerticalDemo;Handle
You can set or hide the handle by using the withHandle prop on the ResizableHandle component.
import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/default/resizable";
const ResizableWithHandleDemo = () => {
return (
<Resizable class="min-h-[200px] max-w-md rounded-lg border">
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
</Resizable>
);
};
export default ResizableWithHandleDemo;import {
Resizable,
ResizableHandle,
ResizablePanel,
} from "@repo/tailwindcss/solid/resizable";
const ResizableWithHandleDemo = () => {
return (
<Resizable class="min-h-[200px] max-w-md rounded-lg border">
<ResizablePanel initialSize={0.3} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">A</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel initialSize={0.7} minSize={0.2}>
<div class="flex h-full items-center justify-center">
<span class="font-semibold">B</span>
</div>
</ResizablePanel>
</Resizable>
);
};
export default ResizableWithHandleDemo;