Capítulo 43 de 108

Resizable

Core Idea

Painéis redimensionáveis acessíveis, com suporte a teclado, para layouts do tipo split-pane (sidebar+conteúdo, editor+preview). Built em cima de react-resizable-panels (bvaughn), não Base UI.

Key Concepts

  • ResizablePanelGroup: container raiz, define orientation="horizontal"|"vertical".
  • ResizablePanel: painel individual; defaultSize="50%" define tamanho inicial (string com %, não número).
  • ResizableHandle: divisor arrastável entre painéis; withHandle mostra alça visível.
  • Grupos podem ser aninhados (ResizablePanelGroup dentro de ResizablePanel) para grids complexos.

Code Examples

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

<ResizablePanelGroup orientation="horizontal" className="max-w-sm rounded-lg border">
  <ResizablePanel defaultSize="50%">
    <div className="flex h-[200px] items-center justify-center p-6">One</div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize="25%">Two</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="75%">Three</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
  • O que demonstra: aninhamento de ResizablePanelGroup (vertical dentro de horizontal) para criar layout tipo IDE.

Reference Tables

Composição:

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Migração v3 → v4 do react-resizable-panels (afeta uso direto da lib, não os wrappers shadcn):

v3v4
PanelGroupGroup
PanelResizeHandleSeparator
direction proporientation prop
defaultSize={50}defaultSize="50%"
onLayoutonLayoutChange
ImperativePanelHandlePanelImperativeHandle
ref prop on PanelpanelRef prop
data-panel-group-directionaria-orientation

Anti-patterns

  • Usar defaultSize={50} (número): na v4 o valor precisa ser string com %, ex. "50%".

Key Takeaways

  1. Dependência real é react-resizable-panels, não @base-ui/react (diferente da maioria dos outros componentes deste lote).
  2. defaultSize é string percentual ("50%"), não número.
  3. Grupos podem ser aninhados trocando orientation para montar grids tipo editor de código.
  4. Os wrappers do shadcn/ui (ResizablePanelGroup, ResizablePanel, ResizableHandle) permanecem estáveis mesmo com a mudança de API v3→v4 da lib subjacente.
  5. withHandle é o que torna o divisor visualmente perceptível; sem ele o handle existe mas é invisível.

Connects To

  • Sidebar: padrão comum é usar Resizable pra criar sidebar redimensionável em vez de largura fixa.
AnteriorScroll AreaPróximoDialog