PatternDisponible

Resizable

Paneles redimensionables con límites y separador operable mediante teclado.

Navigation

Workspace

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/resizable.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

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

export default function Demo() {
  return (
    <ResizablePanelGroup orientation="horizontal" className="min-h-52 w-full">
      <ResizablePanel defaultSize="35%" minSize="20%">
        <div className="grid h-full min-w-0 place-items-center p-2 text-center bl-type-label sm:p-4">
          <span className="min-w-0 max-w-full wrap-anywhere">Navigation</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle aria-label="Resize navigation" />
      <ResizablePanel minSize="30%">
        <div className="grid h-full min-w-0 place-items-center p-2 text-center bl-type-label sm:p-4">
          <span className="min-w-0 max-w-full wrap-anywhere">Workspace</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
orientation	horizontal / vertical	horizontal	Panel arrangement.
ResizablePanel.minSize	string	—	Minimum panel size.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.