BrutalLab UI
en
EnglishEspañol
PatternAvailable

Resizable

Resizable panes with bounded sizing and a keyboard-operable separator.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
  • Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
orientationhorizontal / verticalhorizontalPanel arrangement.
ResizablePanel.minSizestring—Minimum panel size.

Accessibility

Rules that should remain intact when adapting the component to a product.

Label the separator and retain keyboard resize behavior. Define minimum sizes for usable content.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.