Skip to content

[FEATURE] Add Accessible Resizable Panels Component #219

Description

@VINAYMADIVAL

Problem / Motivation

Currently, the DevUI component library lacks a resizable panel layout system that allows users to adjust content regions dynamically.
Such components are essential for dashboards, editors, and split-view layouts where users may need to resize sidebars or content panes.
The goal is to provide a fully accessible, keyboard-friendly, and pointer-draggable resizable layout consistent with DevUI’s styling and architecture.

Proposed Solution

Implement a new self-contained component set under src/components/Resizable.tsx, including:

  • ResizablePanelGroup — main container that manages layout direction (horizontal or vertical).
  • ResizablePanel — content panels that grow/shrink dynamically.
  • ResizableHandle — interactive separator supporting mouse, touch, and keyboard resizing.

Key requirements:

  • Smooth drag resizing with proper cursor feedback.
  • Keyboard accessibility using arrow keys.
  • ARIA roles (separator, aria-valuenow, aria-orientation) for screen reader support.
  • No external dependencies; built entirely with React, Tailwind CSS, and the project’s cn() utility.
  • Integrated demo preview (ResizablePanelGroup.Preview) for easy documentation.

Alternatives Considered

  • Using existing libraries like react-resizable or react-split-pane, but they add unnecessary dependencies and inconsistent styling.
  • Implementing minimal CSS-only resizers, which lack accessibility and keyboard controls.

Acceptance Criteria

  • Users can drag the handle to resize adjacent panels.
  • Keyboard users can resize panels using arrow keys when the handle is focused.
  • Layout works in both horizontal and vertical orientations.
  • Component matches the visual style shown in the attached demo image (Sidebar | Handle | Content).
  • No third-party dependencies are introduced.
  • Proper documentation and preview entry are added to src/data/components.tsx.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions