Development · Web app
Resizable - shadcn/ui
Accessible React component for building resizable panel layouts
Resizable is a copy-paste React component in shadcn/ui built on top of Brian Vaughn's react-resizable-panels library. It provides accessible, keyboard-friendly split-pane layouts with horizontal or vertical orientations and optional drag handles.
What it's for
- Build multi-pane dashboards or email client interfaces with collapsible columns
- Create code editor layouts with adjustable sidebars and terminal panels
- Add responsive split-view screens that support RTL and keyboard resizing
Features
- Built on react-resizable-panels for robust panel management
- Horizontal and vertical panel orientation support
- Accessible keyboard navigation out of the box
- Optional visible grip handle via the withHandle prop
- Full RTL layout compatibility
- Installs directly into projects via the shadcn CLI
Pricing
Open source
Details
- Type
- Web app
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Code library, Web
- For
- React and Next.js developers building complex web app layouts
- Alternative to
- react-split, react-resizable-layout, Allotment
- Tags
- react, shadcn, tailwind, ui components, layout, panels
Why it was saved
- @shadcn: Lets you build adjustable panel layouts (like IDE panes or mail clients) with draggable dividers and grip handles.
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated