Navigation & disclosure@neumorphism-ui/resizable

Resizable

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

@neumorphism-ui/resizable

Registry JSON

Preview

List

Details

Installation

npx shadcn@latest add @neumorphism-ui/resizable

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

export default function Example() {
  return <ResizablePanelGroup orientation="horizontal" className="h-48 max-w-lg">
    <ResizablePanel defaultSize={40} minSize={25}><div className="grid h-full place-items-center p-4">List</div></ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={60} minSize={30}><div className="grid h-full place-items-center p-4">Details</div></ResizablePanel>
  </ResizablePanelGroup>;
}

API Reference

Component	Prop	Type	Default	Description
`ResizablePanelGroup`	`orientation`required	`"horizontal" \| "vertical"`	`—`	Sets the panel split direction.
`ResizablePanel`	`defaultSize`	`number \| string`	`—`	Sets the initial panel size.
`ResizablePanel`	`minSize / maxSize`	`number \| string`	`—`	Constrains how far a panel may shrink or grow.
`ResizableHandle`	`withHandle`	`boolean`	`false`	Shows a visual grip in the middle of the separator.
`ResizableHandle`	`disabled`	`boolean`	`false`	Keeps the separator visible while disabling resizing.