Resizable

Install

Pull Resizable from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { Resizable } from "@brika/clay";

import { Resizable } from "@brika/clay/components/resizable";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@brika/clay/components/resizable';
export default function ResizableDefaultDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-md rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-6 text-sm">
          Left
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-6 text-sm">
          Right
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Resizable, every way

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@brika/clay/components/resizable';
export default function ResizableVerticalDemo() {
  return (
    <ResizablePanelGroup
      orientation="vertical"
      className="max-w-md rounded-lg border"
      style={{ height: '16rem' }}
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-4 text-sm">
          Top
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-4 text-sm">
          Bottom
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Accessibility

• › The resize handle carries role="separator" and responds to arrow keys for keyboard resizing.
• › withHandle renders a visible grip icon, improving discoverability of the resize affordance.
• › Ensure panels have meaningful aria-label values when used as distinct content regions.

Theme tokens

Every CSS variable Resizable reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Resizable without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.resizable, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "resizable": {
      "handleSize": "1px"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-resizable-…) — see the chips on each token row.

API reference

Props specific to Resizable. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.