Resizable
shadcn/ui
Draggable split panes. For ticket list + detail, filter sidebar + table, and split-view layouts.
@/components/ui/resizableHorizontal split — drag the handle
Sidebar
All tickets
Open
My tickets
Archived
Ticket list
T7A3763Fix login redirect
Open
T7A3801Update ticket filters
In Progress
T7A3820Export to CSV
In Review
In context — ticket triage (3-panel)
Filters
Status
Priority
Assignee
Date range
Tickets
T7A3763Fix login redirect
T7A3801Update ticket filters
T7A3820Export to CSV
T7A3855Mobile layout fix
Detail
T7A3763 — Fix login redirect
Open
HighAssigned to DA · 13.5.2026
Drag any handle to resize. Each panel respects minSize so none can collapse completely.
Vertical split
Top panel (60%)
Bottom panel (40%)
Sub-components
| Component | Role |
|---|---|
| ResizablePanelGroup | Root — sets direction (horizontal | vertical) and manages shared state |
| ResizablePanel | Individual pane — defaultSize (%), minSize, maxSize in percent |
| ResizableHandle | Drag handle between panels. withHandle shows the grip icon |
Props — ResizablePanelGroup
| Prop | Type | Description |
|---|---|---|
| direction | "horizontal" | "vertical" | Layout axis |
| className | string | Height is required for vertical splits (e.g. h-[400px]) |
| onLayout | (sizes: number[]) => void | Called when panel sizes change — use to persist layout |
| autoSaveId | string | Unique key for localStorage persistence of panel sizes |
Props — ResizablePanel
| Prop | Type | Description |
|---|---|---|
| defaultSize | number | Initial size in percent (0–100). All panels must sum to 100 |
| minSize | number | Minimum percent the panel can shrink to |
| maxSize | number | Maximum percent the panel can grow to |
| collapsible | boolean | Whether the panel can collapse to 0 (or minSize) |
Use autoSaveId on ResizablePanelGroup to persist user-adjusted panel sizes in localStorage automatically.
On this page