Resizable Panel Component

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Resizable Panel must be a direct child of a Resizable group, alternating with Resizable Handle elements. Its content remains consumer-owned and keeps normal document semantics.

import "@nordhealth/components/lib/ResizablePanel"

Resizable Panel participates in the percentage layout owned by its parent Resizable group. The panel declares its identity and constraints, while the group resolves those values with adjacent panels and handles into the current shared layout.

Examples

Identity and constraints

Use a stable DOM id or panel-id so layouts and resize events retain identity across updates. default-size, min-size, and max-size are percentages. Add collapsible and set collapsed-size when the adjacent handle may move the panel below its expanded minimum.

Constraints are resolved by the parent group, including controlled layouts, nested groups, viewport changes, and programmatic resize/collapse/expand methods. --n-resizable-panel-overflow controls content overflow without changing layout calculations.

Accessibility

Keep essential controls usable at every allowed size and ensure collapsed content is not the only way to reach a required action. The adjacent handle references the affected panel IDs and reports the feasible value range to assistive technology.

API reference

ResizablePanel

Resizable Panel contains consumer-owned content whose percentage size is coordinated by its direct Resizable parent.

<nord-resizable-panel></nord-resizable-panel>

Props

Property	Attribute	Description	Type	Default
`panelId`	`panel-id`	Stable state identifier. Defaults to the panel's DOM id or a generated id.	`string \| undefined`	—
`defaultSize`	`default-size`	Initial percentage used when no group default layout supplies this panel.	`number \| undefined`	—
`minSize`	`min-size`	Minimum expanded percentage.	`number`	`0`
`maxSize`	`max-size`	Maximum percentage.	`number`	`100`
`collapsible`	`collapsible`	Allows the panel to snap below its minimum to `collapsed-size`.	`boolean`	`false`
`collapsedSize`	`collapsed-size`	Percentage used while collapsed.	`number`	`0`

Slots

Slot name	Description
`Default slot`	Consumer-owned panel content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-resizable-panel-overflow`	Controls overflow of panel content.	`auto`

Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.

Resizable Panel Alpha Light DOM & Tailwind