Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
One
Two
Three
Installation#
pnpm dlx shadcn@latest add @shark/resizable
Anatomy#
Resizable ├── ResizablePanel └── ResizableResizeTrigger
Usage#
import { Resizable, ResizablePanel, ResizableResizeTrigger, } from "@/components/ui/resizable";
<Resizable> <ResizablePanel id="1" /> <ResizableResizeTrigger id="1:2" /> <ResizablePanel id="2" /> </Resizable>
Orientation#
Use the orientation prop to control the orientation of the resizable panels.
Horizontal#
Set orientation="horizontal" to place panels side by side (default).
Left
Right
Vertical#
Set orientation="vertical" to stack panels vertically.
Top
Bottom
Examples#
Handle#
Use the withHandle prop on ResizableResizeTrigger to show a visible grip handle for resizing.
Panel 1
Panel 2
Min / Max Size#
Use panels with minSize and maxSize to constrain how small or large a panel can be resized.
Sidebar
Content
Multiple Panels#
Left
Center
Right
API Reference#
Resizable#
Root component. Manages resizable panel layout.
| Prop | Type | Default |
|---|---|---|
panels | PanelData[] | - |
defaultSize | number[] | - |
size | number[] | - |
orientation | "horizontal" | "vertical" | "horizontal" |
keyboardResizeBy | number | - |
onResize | (details: ResizeDetails) => void | - |
onResizeStart | () => void | - |
onResizeEnd | (details: ResizeEndDetails) => void | - |
onCollapse | (details: ExpandCollapseDetails) => void | - |
onExpand | (details: ExpandCollapseDetails) => void | - |
className | string | - |
ResizablePanel#
A resizable panel. Multiple panels share the available space.
| Prop | Type | Default |
|---|---|---|
id | string | - |
asChild | boolean | false |
className | string | - |
ResizableResizeTrigger#
Draggable handle between panels for resizing.
| Prop | Type | Default |
|---|---|---|
id | ${string}:${string} | - |
withHandle | boolean | false |
disabled | boolean | - |
asChild | boolean | false |
className | string | - |
For a complete list of props, see the Ark UI documentation.