Resizable

Accessible resizable panel groups and layouts.

One

Two

Three

tsx

1
2
3
4
5<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>Left</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Right</ResizablePanel>
</ResizablePanelGroup>

Resizable — panels côte à côte avec une poignée pour ajuster leur taille (VS Code style). Group horizontal ou vertical. Chaque Panel a un defaultSize (%) et éventuellement min/maxSize.

Installation

Terminal

$ bext ui add resizable

Usage

tsx

1
2
3
4
5
6
7import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@bext-stack/ui/primitives"

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
  <ResizablePanel defaultSize={50}>Left</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>Right</ResizablePanel>
</ResizablePanelGroup>

Anatomy

<ResizablePanelGroup direction="horizontal">
  ├── <ResizablePanel defaultSize={50} minSize={20}>left</ResizablePanel>
  ├── <ResizableHandle />
  └── <ResizablePanel defaultSize={50}>right</ResizablePanel>
</ResizablePanelGroup>

API Reference

ResizablePanelGroup

Prop	Type	Default	Description
direction	"horizontal" \| "vertical"	—	Sens du split.
children	ReactNode	—	undefined

ResizablePanel

Prop	Type	Default	Description
defaultSize	number	—	% de la taille initiale (0-100).
minSize	number	—	% minimum. Sinon 0.
maxSize	number	—	% maximum. Sinon 100.
children	ReactNode	—	undefined

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	—	Affiche un petit grip visuel au centre de la poignée.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="resizable"	PanelGroup root	undefined	undefined
data-panel-group-direction	PanelGroup root	"horizontal" \| "vertical"	undefined

Keyboard

Key	Action
`Arrow keys`	Ajuster la taille par pas de 10px.
`Home / End`	Aller au min / max.

Accessibility

Handle porte role="separator" aria-orientation aria-valuenow aria-valuemin aria-valuemax et est focusable au clavier.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
  return (
    <main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Resizable</h1>
      <p style="color:#64748b;margin-top:0">Drag the divider: a window mousemove updates a width signal (reactive style).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// Two panels split by a draggable handle. Dragging the handle adjusts
// the left panel's width (a percentage held in the island's state).
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Resizable</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Panels separated by a draggable handle.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Radio Group Scroll Area →

On This Page