@wizeworks/silicaui-panels

Silica UI resizable panels — react-resizable-panels wrapped with a Silica-styled resize handle. Drop-in for split editors, sidebars, and any layout that needs a draggable divider.

Install

pnpm add @wizeworks/silicaui-panels @wizeworks/silicaui-react
pnpm add -D @wizeworks/silicaui tailwindcss

Usage

import { ResizablePanelGroup, ResizablePanel, ResizeHandle } from "@wizeworks/silicaui-panels";

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={25} minSize={15}>Sidebar</ResizablePanel>
  <ResizeHandle />
  <ResizablePanel>Main content</ResizablePanel>
</ResizablePanelGroup>

• ResizablePanelGroup — the container. Pass direction="horizontal" (side-by-side) or "vertical" (stacked); size the group yourself, it fills its box.
• ResizablePanel — one region. Takes defaultSize / minSize / maxSize (percentages), collapsible, an imperative ref, and the rest of react-resizable-panels' Panel props.
• ResizeHandle — the draggable divider. Renders a centered grip by default; pass children for your own. Orientation is inferred from the parent group's direction.

Also re-exports react-resizable-panels' imperative helpers (getPanelElement, getPanelGroupElement, getResizeHandleElement) and its prop/handle types, so you can do programmatic resize/collapse and layout persistence without a separate install.

Links

• silicaui.com — website & docs

• GitHub repo

• Issues

• @wizeworks/silicaui-react — the component layer this package extends