Resizable

Accessible resizable panel groups and layouts with keyboard support. Built for React applications with Next.js integration and TypeScript support.

Ever used VS Code or any dev tool where you can drag to resize the sidebar? That's what resizable panels do - they let users adjust the layout to fit their workflow. No more fixed layouts that work for nobody.

Nested resizable panels

Drag the handles to resize panels in any direction:

Loading component...

Built on react-resizable-panels with full keyboard support and proper ARIA attributes. This free open source React component handles all the drag mechanics, constraints, and persistence while you focus on the content.

npx shadcn@latest add resizable

Why resizable panels are game changers

Fixed layouts are nobody's friend. Resizable panels let users work how they want:

User-controlled layout - Everyone gets their perfect setup
Responsive by default - Panels adapt to available space
Keyboard accessible - Arrow keys for fine control
Persistence ready - Save layouts to localStorage
Smooth dragging - No janky movements or flickering
Constraint support - Set min/max sizes that make sense

Useful resizable patterns

Code editor layout

Classic IDE-style layout with file tree and editor:

Loading component...

"use client"import * as React from "react"import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from "@/components/ui/resizable"import { File, Folder, ChevronRight, ChevronDown } from "lucide-react"import { ScrollArea } from "@/components/ui/scroll-area"export default function ResizableEditor() {  const [openFolders, setOpenFolders] = React.useState<Set<string>>(new Set(['src']))  const toggleFolder = (folder: string) => {    const newOpen = new Set(openFolders)    if (newOpen.has(folder)) {      newOpen.delete(folder)    } else {      newOpen.add(folder)    }    setOpenFolders(newOpen)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <ResizablePanelGroup        direction="horizontal"        className="h-[400px] max-w-5xl rounded-lg border"      >        <ResizablePanel defaultSize={20} minSize={15} maxSize={30}>          <div className="h-full bg-muted/30">            <div className="border-b px-3 py-2">              <h3 className="text-sm font-semibold">Explorer</h3>            </div>            <ScrollArea className="h-[calc(100%-32px)]">              <div className="p-2 text-sm">                <div>                  <button                     onClick={() => toggleFolder('src')}                    className="flex items-center gap-1 w-full hover:bg-accent/50 rounded px-1 py-0.5"                  >                    {openFolders.has('src') ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}                    <Folder className="h-3.5 w-3.5" />                    <span>src</span>                  </button>                  {openFolders.has('src') && (                    <div className="ml-3 mt-1 space-y-1">                      <div className="flex items-center gap-1 hover:bg-accent/50 rounded px-1 py-0.5">                        <File className="h-3.5 w-3.5" />                        <span>index.tsx</span>                      </div>                      <div className="flex items-center gap-1 hover:bg-accent/50 rounded px-1 py-0.5">                        <File className="h-3.5 w-3.5" />                        <span>app.tsx</span>                      </div>                      <div className="flex items-center gap-1 hover:bg-accent/50 rounded px-1 py-0.5">                        <File className="h-3.5 w-3.5" />                        <span>globals.css</span>                      </div>                    </div>                  )}                </div>                <div className="mt-2">                  <div className="flex items-center gap-1 hover:bg-accent/50 rounded px-1 py-0.5">                    <File className="h-3.5 w-3.5" />                    <span>package.json</span>                  </div>                  <div className="flex items-center gap-1 hover:bg-accent/50 rounded px-1 py-0.5">                    <File className="h-3.5 w-3.5" />                    <span>README.md</span>                  </div>                </div>              </div>            </ScrollArea>          </div>        </ResizablePanel>        <ResizableHandle withHandle />        <ResizablePanel defaultSize={80}>          <ResizablePanelGroup direction="vertical">            <ResizablePanel defaultSize={70}>              <div className="h-full p-4 font-mono text-sm">                <div className="text-muted-foreground mb-2">// index.tsx</div>                <div>                  <span className="text-blue-500">import</span> React <span className="text-blue-500">from</span> <span className="text-green-500">'react'</span>                </div>                <div className="mt-2">                  <span className="text-blue-500">export default function</span> <span className="text-yellow-500">App</span>() {`{`}                </div>                <div className="ml-4">                  <span className="text-blue-500">return</span> (                </div>                <div className="ml-8">                  &lt;<span className="text-red-500">div</span>&gt;                </div>                <div className="ml-12">                  Hello World                </div>                <div className="ml-8">                  &lt;/<span className="text-red-500">div</span>&gt;                </div>                <div className="ml-4">)</div>                <div>{`}`}</div>              </div>            </ResizablePanel>            <ResizableHandle />            <ResizablePanel defaultSize={30}>              <div className="h-full bg-muted/30 p-3">                <div className="text-sm font-semibold mb-2">Terminal</div>                <div className="font-mono text-xs space-y-1">                  <div className="text-muted-foreground">$ npm run dev</div>                  <div className="text-green-500">✓ Ready in 2.1s</div>                  <div className="text-blue-500">→ Local: http://localhost:3000</div>                </div>              </div>            </ResizablePanel>          </ResizablePanelGroup>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Sidebar that can collapse to icons or expand for full navigation:

Loading component...

"use client"import * as React from "react"import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from "@/components/ui/resizable"import { Button } from "@/components/ui/button"import {   Home,   Users,   Settings,   BarChart3,   PanelLeftClose,  PanelLeft,  Mail,  Calendar} from "lucide-react"import { cn } from "@/lib/utils"export default function ResizableSidebar() {  const [isCollapsed, setIsCollapsed] = React.useState(false)  const menuItems = [    { icon: Home, label: "Dashboard", active: true },    { icon: Users, label: "Users" },    { icon: Mail, label: "Messages", badge: "3" },    { icon: BarChart3, label: "Analytics" },    { icon: Calendar, label: "Calendar" },    { icon: Settings, label: "Settings" },  ]  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <ResizablePanelGroup        direction="horizontal"        className="h-[400px] max-w-5xl rounded-lg border"      >        <ResizablePanel           defaultSize={20}           minSize={15}           maxSize={30}          collapsible={true}          collapsedSize={4}          onCollapse={() => setIsCollapsed(true)}          onExpand={() => setIsCollapsed(false)}        >          <div className="h-full bg-muted/30">            <div className="flex items-center justify-between border-b px-3 py-2">              {!isCollapsed && (                <h3 className="text-sm font-semibold">Navigation</h3>              )}              <Button                variant="ghost"                size="icon"                className="h-6 w-6"                onClick={() => setIsCollapsed(!isCollapsed)}              >                {isCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}              </Button>            </div>            <nav className="p-2">              {menuItems.map((item, i) => {                const Icon = item.icon                return (                  <button                    key={i}                    className={cn(                      "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent/50 transition-colors",                      item.active && "bg-accent",                      isCollapsed && "justify-center"                    )}                  >                    <Icon className="h-4 w-4 flex-shrink-0" />                    {!isCollapsed && (                      <>                        <span className="flex-1 text-left">{item.label}</span>                        {item.badge && (                          <span className="bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full">                            {item.badge}                          </span>                        )}                      </>                    )}                  </button>                )              })}            </nav>          </div>        </ResizablePanel>        <ResizableHandle withHandle />        <ResizablePanel defaultSize={80}>          <div className="h-full p-6">            <h1 className="text-2xl font-bold mb-4">Dashboard</h1>            <div className="grid gap-4 md:grid-cols-2">              <div className="rounded-lg border p-4">                <h3 className="font-semibold mb-2">Total Users</h3>                <p className="text-3xl font-bold">1,234</p>                <p className="text-sm text-muted-foreground">+12% from last month</p>              </div>              <div className="rounded-lg border p-4">                <h3 className="font-semibold mb-2">Revenue</h3>                <p className="text-3xl font-bold">$45,678</p>                <p className="text-sm text-muted-foreground">+8% from last month</p>              </div>              <div className="rounded-lg border p-4">                <h3 className="font-semibold mb-2">Active Sessions</h3>                <p className="text-3xl font-bold">573</p>                <p className="text-sm text-muted-foreground">Currently online</p>              </div>              <div className="rounded-lg border p-4">                <h3 className="font-semibold mb-2">Conversion Rate</h3>                <p className="text-3xl font-bold">3.4%</p>                <p className="text-sm text-muted-foreground">+0.5% from last week</p>              </div>            </div>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Three column layout

Email client style with list and detail views:

Loading component...

"use client"import * as React from "react"import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from "@/components/ui/resizable"import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"import { Badge } from "@/components/ui/badge"import { ScrollArea } from "@/components/ui/scroll-area"import { Star, Archive, Send, Trash2 } from "lucide-react"export default function ResizableThreeColumn() {  const [selectedEmail, setSelectedEmail] = React.useState(0)  const folders = [    { name: "Inbox", count: 12, icon: "📥" },    { name: "Sent", count: 0, icon: "📤" },    { name: "Drafts", count: 2, icon: "📝" },    { name: "Starred", count: 5, icon: "⭐" },    { name: "Archive", count: 0, icon: "📁" },    { name: "Trash", count: 0, icon: "🗑️" },  ]  const emails = [    {      id: 0,      from: "GitHub",      subject: "Security alert: new sign-in",      preview: "We noticed a new sign-in to your account from a device...",      time: "2 hours ago",      unread: true,      avatar: "GH"    },    {      id: 1,      from: "Vercel",      subject: "Your deployment is ready",      preview: "Your project has been successfully deployed to production...",      time: "5 hours ago",      unread: true,      avatar: "V"    },    {      id: 2,      from: "Linear",      subject: "Sprint planning reminder",      preview: "Don't forget about tomorrow's sprint planning session...",      time: "Yesterday",      unread: false,      avatar: "L"    },    {      id: 3,      from: "Stripe",      subject: "Monthly invoice",      preview: "Your monthly invoice for December is now available...",      time: "2 days ago",      unread: false,      avatar: "S"    },  ]  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <ResizablePanelGroup        direction="horizontal"        className="h-[400px] max-w-6xl rounded-lg border"      >        <ResizablePanel defaultSize={15} minSize={10} maxSize={20}>          <div className="h-full bg-muted/30">            <div className="border-b px-3 py-2">              <h3 className="text-sm font-semibold">Folders</h3>            </div>            <div className="p-2 space-y-1">              {folders.map((folder, i) => (                <button                  key={i}                  className={`w-full flex items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-accent/50 transition-colors ${                    i === 0 ? 'bg-accent' : ''                  }`}                >                  <div className="flex items-center gap-2">                    <span>{folder.icon}</span>                    <span>{folder.name}</span>                  </div>                  {folder.count > 0 && (                    <Badge variant="secondary" className="h-5 px-1.5">                      {folder.count}                    </Badge>                  )}                </button>              ))}            </div>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize={35} minSize={25} maxSize={45}>          <div className="h-full">            <div className="border-b px-3 py-2 flex items-center justify-between">              <h3 className="text-sm font-semibold">Inbox</h3>              <div className="flex gap-1">                <Archive className="h-4 w-4 text-muted-foreground" />                <Trash2 className="h-4 w-4 text-muted-foreground" />              </div>            </div>            <ScrollArea className="h-[calc(100%-40px)]">              <div className="divide-y">                {emails.map((email) => (                  <button                    key={email.id}                    onClick={() => setSelectedEmail(email.id)}                    className={`w-full px-3 py-3 text-left hover:bg-accent/50 transition-colors ${                      selectedEmail === email.id ? 'bg-accent/50' : ''                    }`}                  >                    <div className="flex items-start gap-3">                      <Avatar className="h-8 w-8">                        <AvatarFallback className="text-xs">                          {email.avatar}                        </AvatarFallback>                      </Avatar>                      <div className="flex-1 min-w-0">                        <div className="flex items-center justify-between mb-1">                          <span className={`text-sm ${email.unread ? 'font-semibold' : ''}`}>                            {email.from}                          </span>                          <span className="text-xs text-muted-foreground">                            {email.time}                          </span>                        </div>                        <div className={`text-sm ${email.unread ? 'font-medium' : ''} truncate`}>                          {email.subject}                        </div>                        <div className="text-xs text-muted-foreground truncate">                          {email.preview}                        </div>                      </div>                    </div>                  </button>                ))}              </div>            </ScrollArea>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize={50}>          <div className="h-full p-6">            <div className="mb-4">              <h2 className="text-xl font-semibold mb-2">                {emails[selectedEmail].subject}              </h2>              <div className="flex items-center gap-3 text-sm text-muted-foreground">                <div className="flex items-center gap-2">                  <Avatar className="h-6 w-6">                    <AvatarFallback className="text-xs">                      {emails[selectedEmail].avatar}                    </AvatarFallback>                  </Avatar>                  <span>{emails[selectedEmail].from}</span>                </div>                <span>•</span>                <span>{emails[selectedEmail].time}</span>              </div>            </div>            <div className="prose prose-sm max-w-none">              <p>Hi there,</p>              <p>{emails[selectedEmail].preview}</p>              <p>                This is the full email content that would normally be much longer                and contain all the details of the message. In a real application,                this would be the complete email body with formatting, links, and                possibly attachments.              </p>              <p>Best regards,<br />The {emails[selectedEmail].from} Team</p>            </div>            <div className="mt-6 flex gap-2">              <button className="px-3 py-1.5 text-sm border rounded-md hover:bg-accent">                Reply              </button>              <button className="px-3 py-1.5 text-sm border rounded-md hover:bg-accent">                Forward              </button>              <button className="px-3 py-1.5 text-sm border rounded-md hover:bg-accent">                Archive              </button>            </div>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

"use client"import * as React from "react"import { GripVerticalIcon } from "lucide-react"import * as ResizablePrimitive from "react-resizable-panels"import { cn } from "@/lib/utils"function ResizablePanelGroup({  className,  ...props}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {  return (    <ResizablePrimitive.PanelGroup      data-slot="resizable-panel-group"      className={cn(        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",        className      )}      {...props}    />  )}function ResizablePanel({  ...props}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />}function ResizableHandle({  withHandle,  className,  ...props}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {  withHandle?: boolean}) {  return (    <ResizablePrimitive.PanelResizeHandle      data-slot="resizable-handle"      className={cn(        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",        className      )}      {...props}    >      {withHandle && (        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">          <GripVerticalIcon className="size-2.5" />        </div>      )}    </ResizablePrimitive.PanelResizeHandle>  )}export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

These patterns show up in the best tools because they let users work efficiently. Code editors where you can hide the file tree, dashboards where the sidebar gets out of the way, email clients where you can focus on what matters.

Perfect for productivity apps

Works great anywhere users spend real time - admin panels, dashboards, editors, email clients, data tools. The kind of apps where people have workflows and preferences.

Drops right into Next.js projects. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

Built on react-resizable-panels

Uses bvaughn's react-resizable-panels under the hood, which is battle-tested:

Constraint system - Min/max sizes that respect each other
Collapse support - Panels can collapse to zero
Persistence - Save and restore layouts
Keyboard control - Full keyboard navigation
Touch support - Works on tablets and touch devices
Performance optimized - Smooth even with complex layouts

API Reference

ResizablePanelGroup

Container that manages panel layout and drag state.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	Panel arrangement direction
`autoSaveId`	`string`	-	ID for localStorage persistence
`storage`	`PanelGroupStorage`	-	Custom storage implementation
`onLayout`	`(sizes: number[]) => void`	-	Called when layout changes

ResizablePanel

Individual panel within a group.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`defaultSize`	`number`	-	Initial size as percentage
`minSize`	`number`	`0`	Minimum size as percentage
`maxSize`	`number`	`100`	Maximum size as percentage
`collapsible`	`boolean`	`false`	Can collapse to zero
`collapsedSize`	`number`	`0`	Size when collapsed
`onCollapse`	`() => void`	-	Called when panel collapses
`onExpand`	`() => void`	-	Called when panel expands

ResizableHandle

Draggable divider between panels.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`withHandle`	`boolean`	`false`	Show visible drag handle
`disabled`	`boolean`	`false`	Disable dragging

Key	Action
`Tab`	Focus next handle
`Enter`	Enter keyboard resize mode
`Arrow Left/Up`	Shrink left/top panel by 10px
`Arrow Right/Down`	Grow left/top panel by 10px
`Shift + Arrows`	Resize by 1px (fine control)
`Home`	Resize to minimum size
`End`	Resize to maximum size
`Escape`	Exit keyboard resize mode

Common Patterns

Pattern	Use Case	Configuration
Fixed sidebar	Navigation that stays consistent	`minSize={15} maxSize={15}`
Collapsible panel	Hide when not needed	`collapsible={true} collapsedSize={5}`
50/50 split	Equal starting point	`defaultSize={50}` on both
Golden ratio	Pleasing proportions	`defaultSize={62}` and `38`
Persistent layout	Remember user preference	`autoSaveId="my-layout"`

Make resizable panels feel right

Keep these in mind when building with resizable panels:

Set sensible defaults - Start with a layout that works for most
Respect minimums - Don't let panels get too small to be useful
Make handles obvious - Users need to know they can drag
Consider mobile - Maybe disable resizing on small screens
Add collapse buttons - Not everyone finds the drag handles
Save user layouts - People hate redoing their setup
Test with content - Make sure panels work with real data
Provide presets - Quick buttons for common layouts

Nested resizable panels

Why resizable panels are game changers

Useful resizable patterns

Code editor layout

Dashboard with collapsible sidebar

Three column layout

Perfect for productivity apps

Built on react-resizable-panels

API Reference

ResizablePanelGroup

ResizablePanel

ResizableHandle

Keyboard Navigation

Common Patterns

Make resizable panels feel right

On this page

Resizable

Reactresizable

Reactresizable

Reactscroll-area

Reactresizable

Reactbutton

Reactresizable

Reactavatar

Reactbadge

Reactscroll-area

On this page