Shadcn.io is not affiliated with official shadcn/ui
Shadcn Resizable
React resizable for dashboards and split editors. Built with TypeScript and Tailwind CSS for Next.js using Base UI — drag handles, nested groups, and RTL.
A resizable is a row or column of panels with a drag handle between them. Pull the handle and the split moves; arrow keys do the same once the handle is focused. Use it for file trees, inboxes, and any layout where a fixed sidebar is the wrong size.
Looking for a neobrutalism version for shadcn?
Same resizable, thicker borders. The NeoBrutalism resizable is the kit if you want that look.
Usage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize="50%">One</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize="50%">Two</ResizablePanel>
</ResizablePanelGroup>orientation="vertical" stacks them. defaultSize is a percentage string — a bare number is pixels.
Composition
Vertical
orientation="vertical" — header over content. The group needs a height.
Handle
withHandle on ResizableHandle paints a grip. Same drag target, just visible.
RTL
Wrap with DirectionProvider and dir="rtl". The handle still sits between the panels.
API
Prop
Type
ResizablePanel
Prop
Type
ResizableHandle
Prop
Type
direction is the wrapper name for orientation. Either works.
Keyboard
| Key | Action |
|---|---|
Tab | Focus the handle |
ArrowLeft / ArrowRight | Resize a horizontal split by 5% |
ArrowUp / ArrowDown | Resize a vertical split by 5% |
Home / End | Collapse toward the start / expand toward the end |
Enter | Collapse or expand if the panel is collapsible |
F6 | Next handle in the group |
Notes
A number is pixels
defaultSize={50} is a 50px strip. Use defaultSize="50%" for a half split. Same rule for minSize and maxSize.
Give the group a height when it is vertical.
With other components
Nav in a panel
Scroll AreaOverflow inside a panel
TabsSwitch panel content
CardFrame around the group
TableList beside a preview
ButtonCollapse from a click
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Radio Group
React radio group for checkout, surveys, and settings. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one option selected, arrow keys move.
Scroll Area
React scroll area for overflow lists and image galleries. Built with TypeScript and Tailwind CSS for Next.js using Base UI — custom scrollbars, native wheel and touch.