Resizable

Hydration-stable panes with pointer, keyboard and persisted sizing.@gemologic/sheen · navigation

Playground

orientation

Files

Preview

<Resizable defaultSizes={[0.35, 0.65]} orientation="horizontal"><ResizablePanel index={0}>Files</ResizablePanel><ResizableHandle index={0} label="Resize files and preview" /><ResizablePanel index={1}>Preview</ResizablePanel></Resizable>

Variant matrix

Inspector split

Files

Preview

orientation: horizontal

Files

Preview

orientation: vertical

Files

Preview

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Resizable.tsx

Tokens

--sheen-color-border-control
--sheen-color-accent-fg
--sheen-color-focus-ring
--sheen-color-focus-ring-offset

Accessibility

Role: group containing adjustable separatorsKeyboard: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Home, End

Do

Pass the same persisted initialSizes on the server and client.

Do not

Do not read localStorage on mount and visibly replace server geometry.

Generated props

Name	Type	Default	Description
`children` *	`JSX.Element`	—	Ordered panels and handles.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal side-by-side or vertical stacked panels.
`sizes`	`readonly number[]`	—	Controlled panel fractions summing to one.
`defaultSizes`	`readonly number[]`	—	Deterministic initial panel fractions summing to one.
`onSizesChange`	`(sizes: readonly number[]) => void`	—	Reports validated immutable panel fractions.
`keyboardStep`	`number`	`0.05`	Fraction moved by a separator arrow-key action.
`persistence`	`ResizablePersistence`	—	App-owned server-known initial sizes, save function, and explicit error handler.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.