Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Advanced

With Resizable Panels Scroll Area for React

Two resizable panels, each with its own scroll area, for a split-pane file browser.

Framework
UI library

IDE-style layouts need resizable panes: people adjust the sidebar's width without losing their place in the file list or the preview. This example splits a Resizable into a Files panel and a Preview panel, each a 400px column with a header and a Scroll Area that fills the rest with min-h-0 flex-1. A ResizableResizeTrigger with withHandle between them shows a grip, and each panel keeps at least 30% of the width. Use it for code editors, file explorers, and mail clients.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the two panels sized?

Files and Preview sit side by side. Each one starts at half the group. Each ResizablePanel has defaultSize "50%" and minSize "30%". orientation is horizontal on Resizable, so those values are widths. For minSize, a number is pixels and a percentage is a string.

What does withHandle do?

ResizableResizeTrigger sets withHandle, which shows the grip between Files and Preview. The trigger's accessible name is Resize. Focus it and the arrow keys change the sizes. Home and End jump toward the ends of the range.

Why do the scroll areas use min-h-0 and flex-1?

Each panel's body is a h-[400px] column, flex flex-col. The header is a border-b row. ScrollArea has min-h-0 flex-1, so it takes the height left under that header and scrolls inside it.

What is in the Files list?

Thirty buttons, type button, labeled file-1.tsx through file-30.tsx, each with "Updated N days ago" in text-xs text-muted-foreground. The button is w-full with px-3 py-2 and hover:bg-accent. The list wrapper is gap-1 p-2.

What is in the Preview pane?

A heading "File Content", a short paragraph, then six more paragraphs in flex flex-col gap-2. The text is text-sm text-muted-foreground, with p-4 on the wrapper. The header above the area reads Preview.

What wraps the two panels?

Resizable has className max-w-4xl rounded-lg border bg-background. Each header is p-4 with an h3. The two scroll areas are separate, so each pane scrolls on its own.

All 8 scroll area examples