Resizable

Copy<ResizablePanelGroup direction="horizontal" className="rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Left panel</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Right panel</div>
  </ResizablePanel>
</ResizablePanelGroup>

Copy<ResizablePanelGroup direction="vertical" className="rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Top panel</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Bottom panel</div>
  </ResizablePanel>
</ResizablePanelGroup>

Copy<ResizablePanelGroup direction="horizontal" className="rounded-lg border">
  <ResizablePanel defaultSize={25} minSize={15}>
    <div className="p-4">Sidebar</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">Main</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={25} minSize={15}>
    <div className="p-4">Inspector</div>
  </ResizablePanel>
</ResizablePanelGroup>

Copy<ResizableHandle withHandle />

Copy<ResizablePanel
  defaultSize={30}
  minSize={20}
  maxSize={60}
  collapsible
  collapsedSize={5}
>
  ...
</ResizablePanel>

Copyimport {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
 
<ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border">
  <ResizablePanel defaultSize={20} minSize={15} collapsible>
    <nav className="p-2">Sidebar nav</nav>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={80}>
    <main className="p-4">Page content</main>
  </ResizablePanel>
</ResizablePanelGroup>

Copy# Mint — Resizable Specs
 
## Component
- name: resizable
- file: registry/mint/resizable.tsx
- installs to: components/ui/resizable.tsx
- dependencies: react-resizable-panels, lucide-react
- registryDependencies: none
 
## What is it
Thin styled wrappers around react-resizable-panels that add consistent handle
styling to draggable split-panel layouts. Use it for IDE-style workspaces,
sidebar/content splits, and multi-pane dashboards. Do not use when panels have
fixed sizes — a simple CSS grid or flex layout is more appropriate.
 
## Visual identity
Minimal and unobtrusive: the separator is a 1px --border line, a soft,
translucent green line at 60% opacity, that expands its hit area via a
pseudo-element without visual noise. The optional grip pill (border
+ --border fill, rounded-xs) signals draggability while staying compact and light.
 
## Design tokens
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%)   — separator line and grip pill fill/border
--ring: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)         — green focus ring on the handle
 
## Sub-components
- ResizablePanelGroup  → flex container that wraps all panels; sets orientation via aria-[orientation]
- ResizablePanel       → individual resizable pane; accepts size constraints and collapsible behaviour
- ResizableHandle      → 1px separator with extended hit area; withHandle renders a visible grip pill
 
## External dependencies
- react-resizable-panels: keyboard-accessible drag-resize engine (Panel, PanelGroup, PanelResizeHandle)
- lucide-react: provides GripVerticalIcon for the withHandle grip pill
 
## States
- focus-visible: 1px --ring ring with 1px offset on the handle separator
- aria-[orientation=horizontal]: handle rotates to horizontal layout (h-px, full-width after pseudo-element, grip div rotates 90deg)
 
## Conventions
- All size values (defaultSize, minSize, maxSize, collapsedSize) are percentages (0–100), not pixels
- Always set minSize to prevent a panel from collapsing to zero unintentionally
- Use collapsible + collapsedSize for sidebar patterns that can be fully hidden
- Persist layout across sessions with onLayout + localStorage
- withHandle improves discoverability; omit it for minimal or data-dense UIs
- Sub-components expose data-slot="resizable-panel-group", data-slot="resizable-panel", and data-slot="resizable-handle" for CSS targeting
- Keyboard resize (from react-resizable-panels): Arrow keys = 1%, Shift+Arrow = 10%, Home/End = min/max