ResizablePanel

Defines a bounded, optionally collapsible pane inside Resizable.@gemologic/sheen · navigation

Playground

This example has no scalar controls. Its validated source remains interactive below.

Files

Preview

<Resizable><ResizablePanel index={0} minSize={0.2}>Files</ResizablePanel><ResizableHandle index={0} label="Resize files and preview" /><ResizablePanel index={1}>Preview</ResizablePanel></Resizable>

Variant matrix

Bounded pane

Files

Preview

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Resizable.tsx

Tokens

--sheen-color-bg
--sheen-space-block-md
--sheen-space-inline-md

Accessibility

Role: region controlled by adjacent separatorKeyboard: No component-owned keys

Do

Keep important controls reachable at the minimum size.

Do not

Do not use unstable panel IDs across refreshes.

Generated props

Name	Type	Default	Description
`children` *	`JSX.Element`	—	Retained panel content.
`index` *	`number`	—	Stable zero-based index into the root initial-size snapshot.
`panelId`	`string`	—	Stable ID used by the separator relationship.
`initialSize`	`number`	—	Panel-specific initial fraction, overriding the root entry.
`minSize`	`number`	—	Minimum fraction allowed during resize.
`maxSize`	`number`	—	Maximum fraction allowed during resize.
`collapsible`	`boolean`	`false`	Allows the panel to collapse past its threshold.
`collapsedSize`	`number`	`0`	Fraction retained while collapsed.
`collapseThreshold`	`number`	`0.05`	Required overdrag fraction before collapse.
`onResize`	`(size: number) => void`	—	Reports current panel fraction.
`onCollapse`	`(size: number) => void`	—	Reports the final collapsed fraction.
`onExpand`	`(size: number) => void`	—	Reports the restored expanded fraction.

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