Neumorphism UI

Resizable

Use Resizable for adjacent work areas whose space people should be able to adjust.

Preview

List and details split

Start with a 40/60 horizontal split and preserve minimum space for both list and details panels.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/resizable

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Set the ResizablePanelGroup orientation, place a ResizableHandle between panels, and give panels useful initial sizes and limits. Keep the containing region at a defined size.

"use client";

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

export default function Example() {
  return (
    <div className="h-48">
      <ResizablePanelGroup orientation="horizontal">
        <ResizablePanel defaultSize="40%" minSize="20%"><div className="p-4">List</div></ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="60%" minSize="20%"><div className="p-4">Details</div></ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

API Reference

Uses react-resizable-panels for size calculation and separator accessibility. Neumorphism styles only the panel boundary and handle instead of reimplementing panel state.

ComponentPropTypeDefaultDescription
ResizablePanelGrouporientation"horizontal" | "vertical""horizontal"Sets the panel split direction.
ResizablePaneldefaultSizenumber | string—Sets the initial panel size.
ResizablePanelminSize / maxSizenumber | string—Constrains how far a panel may shrink or grow.
ResizableHandlewithHandlebooleanfalseShows a visual grip in the middle of the separator.
ResizableHandledisabledbooleanfalseKeeps the separator visible while disabling resizing.

Accessibility

  • 01

    ResizableHandle relies on the library separator semantics and current size values; do not add a fake slider.

  • 02

    Keyboard users can focus the separator and change panel size with arrow keys.

  • 03

    The visual grip is aria-hidden while the separator itself owns the interaction meaning.