Resizable Panels

Resizable Panels — a CSS-first, fully-tokened Resizable Panels component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and available in React, framework-neutral HTML, and a zero-dependency vanilla runtime. No runtime CSS-in-JS, no safelist.

Real use · sidebar + editor + preview

Sidebar

Editor

Preview

Vertical stack

Top

Bottom

Using Resizable Panels

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class resizable-group, with 3 modifiers:

.resizable-group
.resizable-handle
.resizable-handle-grip
.resizable-panel

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-panels

import { ResizablePanels } from "@wizeworks/silicaui-panels";

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

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

export function ResizablePanelsDemo() {
    return (
        <>
            <Section title="Real use · sidebar + editor + preview">
                <ResizablePanelGroup
                    direction="horizontal"
                    className="h-64 max-w-2xl rounded-box border border-base-300"
                >
                    <ResizablePanel defaultSize={20} minSize={15}>
                        <div className="flex h-full items-center justify-center bg-base-200 text-sm">
                            Sidebar
                        </div>
                    </ResizablePanel>
                    <ResizeHandle />
                    <ResizablePanel defaultSize={50} minSize={30}>
                        <div className="flex h-full items-center justify-center text-sm">
                            Editor
                        </div>
                    </ResizablePanel>
                    <ResizeHandle />
                    <ResizablePanel defaultSize={30} minSize={15}>
                        <div className="flex h-full items-center justify-center bg-base-200 text-sm">
                            Preview
                        </div>
                    </ResizablePanel>
                </ResizablePanelGroup>
            </Section>

            <Section title="Vertical stack">
                <ResizablePanelGroup
                    direction="vertical"
                    className="h-64 max-w-md rounded-box border border-base-300"
                >
                    <ResizablePanel defaultSize={50}>
                        <div className="flex h-full items-center justify-center bg-base-200 text-sm">
                            Top
                        </div>
                    </ResizablePanel>
                    <ResizeHandle />
                    <ResizablePanel defaultSize={50}>
                        <div className="flex h-full items-center justify-center text-sm">
                            Bottom
                        </div>
                    </ResizablePanel>
                </ResizablePanelGroup>
            </Section>
        </>
    );
}

The full API for Resizable Panels, on every path, is available through the Silica MCP server.