Components
ResizablePanel
Resizable panel layouts with drag handles. Create split panes for editors, file browsers, and dashboards.
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@sigil-ui/components";
<ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={30}>
<div className="p-4">Sidebar</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={70}>
<div className="p-4">Main content</div>
</ResizablePanel>
</ResizablePanelGroup>
<ResizablePanelGroup direction="vertical" className="h-[400px]">
<ResizablePanel defaultSize={60}>
<div className="p-4">Editor</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={40}>
<div className="p-4">Terminal</div>
</ResizablePanel>
</ResizablePanelGroup>
<ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={20} minSize={15}>Sidebar</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>Editor</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={30} minSize={20}>Preview</ResizablePanel>
</ResizablePanelGroup>
| CSS Variable | Used for |
|---|
--s-border | Handle color |
--s-border-interactive | Handle hover/active color |
--s-surface | Panel background |
--s-duration-fast | Handle hover transition |
| Prop | Type | Default | Description |
|---|
direction | "horizontal" | "vertical" | "horizontal" | Split direction |
className | string | — | Additional CSS classes |
children | ReactNode | — | Panels and handles |
| Prop | Type | Default | Description |
|---|
defaultSize | number | — | Initial size as percentage |
minSize | number | 10 | Minimum size as percentage |
maxSize | number | — | Maximum size as percentage |
className | string | — | Additional CSS classes |
children | ReactNode | — | Panel content |
- Handle is focusable with
role="separator" and aria-orientation
- Arrow keys resize panels by 10% increments
aria-valuemin, aria-valuemax, aria-valuenow reflect panel size