Resizable

Accessible resizable panel groups and layouts with keyboard support.

One

Two

Three

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 preact@11.0.0 react-resizable-panels@4.14.2 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects resizable.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/resizable --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/resizable.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/resizable/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/resizable/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/resizable. Existing components stay in place; shared source files are updated from main.

Selected source files (3)

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "./components/ui/resizable"

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Examples

Vertical

Use orientation="vertical" for vertical resizing.

VerticalSource

Preview

Handle

Use the withHandle prop on ResizableHandle to show a visible handle.

HandleSource

Preview

Reference

See the official Resizable documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source