Resizable

Panels separated by handles that the user drags to share space between them.

@zenoxai/ui/components/resizable Markdown

Alert list

Alert detail

<div className="h-64 w-full max-w-xl overflow-hidden rounded-md border border-border">
  <ResizablePanelGroup>
    <ResizablePanel defaultSize="40%" minSize="25%">
      <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
        Alert list
      </div>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize="60%" minSize="30%">
      <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
        Alert detail
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@zenoxai/ui/components/resizable"

<ResizablePanelGroup>
  <ResizablePanel defaultSize="40%">Alert list</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="60%">Alert detail</ResizablePanel>
</ResizablePanelGroup>

Use resizable panels for split views where the right proportion depends on the task: a list next to its detail, a query above its results. The group fills its parent, so give the parent a height.

The component wraps react-resizable-panels v4. Sizes follow its rules:

Value	Means
`"40%"`, `"40"`	A percentage of the group.
`320`	Pixels. A number is never a percentage.
`"20rem"`	Any CSS length unit: `px`, `rem`, `em`, `vh`, `vw`.

Set minSize on every panel so the user cannot squeeze its content out of view. withHandle adds a visible grip to the separator; use it when the split is not obvious from the layout. The separator line tints with the primary color under the pointer and turns solid primary while it is dragged.

Examples

Vertical

Set orientation="vertical" on the group to stack the panels.

severity:critical AND status:open

Query results

<div className="h-72 w-full max-w-xl overflow-hidden rounded-md border border-border">
  <ResizablePanelGroup orientation="vertical">
    <ResizablePanel defaultSize="35%" minSize="20%">
      <div className="flex h-full items-center justify-center p-6 font-mono text-sm text-text-secondary">
        severity:critical AND status:open
      </div>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize="65%" minSize="30%">
      <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
        Query results
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Three panels

Groups take any number of panels. A collapsible panel collapses when the user drags it below its minSize.

Filters

Assets

Asset detail

<div className="h-64 w-full max-w-xl overflow-hidden rounded-md border border-border">
  <ResizablePanelGroup>
    <ResizablePanel defaultSize="20%" minSize="15%" collapsible>
      <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
        Filters
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize="45%" minSize="30%">
      <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
        Assets
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize="35%" minSize="25%">
      <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
        Asset detail
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Accessibility

Each handle has role="separator" with aria-valuenow, aria-valuemin and aria-valuemax, and takes keyboard focus. The arrow keys resize the panels, Home and End move to the limits, and Enter collapses or expands the panel before the handle when it is collapsible.
Keep every panel usable at its minSize: content that overflows must scroll, for example inside a Scroll Area.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.

ResizablePanelGroup

ResizablePanelGroup lays out ResizablePanel elements in a row, or a column with `orientation="vertical"`, with a ResizableHandle between each pair that the user drags to resize them; it is built on react-resizable-panels. Use it for split views, such as a list beside its detail.

No props of its own. Accepts the props of the element it renders.

ResizablePanel

ResizablePanel is one resizable area of a ResizablePanelGroup; set its `defaultSize` and `minSize` on it.

No props of its own. Accepts the props of the element it renders.

ResizableHandle

ResizableHandle is the divider between two panels of a ResizablePanelGroup. The user drags it, or focuses it and uses the arrow keys, to resize them. The line tints primary on hover and turns solid primary while dragged.

Prop	Type	Default
`withHandle`	`boolean` Shows a grip on the divider, so it is easier to spot.	-