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
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:horizontalorvertical).Key requirements:
separator,aria-valuenow,aria-orientation) for screen reader support.cn()utility.ResizablePanelGroup.Preview) for easy documentation.Alternatives Considered
react-resizableorreact-split-pane, but they add unnecessary dependencies and inconsistent styling.Acceptance Criteria
src/data/components.tsx.