Resizable

Use ResizableHandle to build consistent, accessible interfaces aligned with the shared design system.

Installation

1. Copy the source code:

• Source in this monorepo: packages/ui/src/components/resizable.tsx
• Place in your project: components/ui/resizable.tsx
• Required utility: lib/utils.ts (for cn helper)

2. Update the import paths to match your project structure.

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@hoag/ui/components/resizable";
 
export default function Demo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="h-48 rounded-lg border"
    >
      <ResizablePanel defaultSize={40} className="p-4">
        Left panel
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={60} className="p-4">
        Right panel
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Import

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

Basic Example

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@hoag/ui/components/resizable";
 
export function ResizableHandleBasicExample() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="h-48 rounded-lg border"
    >
      <ResizablePanel defaultSize={40} className="p-4">
        Left panel
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={60} className="p-4">
        Right panel
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Composition Pattern

import { ResizableHandle } from "@hoag/ui/components/resizable";
 
export function ResizableHandleSection() {
  return (
    <section className="space-y-3">
      <h3 className="text-sm font-medium">Resizable section</h3>
      <ResizableHandle />
    </section>
  );
}

Accessibility Checklist

• Verify semantic roles and ARIA attributes for interactive behavior.
• Keep keyboard navigation and focus visibility consistent in all states.
• Ensure color contrast meets accessibility requirements in light and dark themes.
• Provide screen reader context for dynamic state or content changes.

Testing Checklist

• Add render tests for default and key variant states.
• Add interaction tests for callbacks and state transitions.
• Add visual regression checks for responsive and theme variations.
• Cover edge states such as loading, empty, disabled, and error.

Production Tips

• Wrap component logic in feature-level abstractions for domain behavior.
• Keep visual variants centralized to avoid style drift across screens.
• Reuse a single import path strategy for simpler refactors.
• Mirror documented states in Storybook and QA checklists.

Named Exports

• ResizableHandle
• ResizablePanel
• ResizablePanelGroup

API Reference

For authoritative prop signatures and implementation details, inspect:

• packages/ui/src/components/resizable.tsx