Resizable

Adjacent panels separated by a draggable handle.

Upstream documentation

Examples

Panel one

Panel two

Loading preview…

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Resizable

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/resizable.json'

Usage

A complete example using the installed component and hook paths.

Resizable usage

"use client";import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";function ResizablePreview() {  return (    <ResizablePanelGroup orientation="horizontal" className="h-36 w-full rounded-lg border">      <ResizablePanel defaultSize="40%" minSize="20%">        <div className="flex h-full items-center justify-center text-sm">Panel one</div>      </ResizablePanel>      <ResizableHandle withHandle aria-label="Resize example panels" />      <ResizablePanel defaultSize="60%" minSize="20%">        <div className="flex h-full items-center justify-center text-sm">Panel two</div>      </ResizablePanel>    </ResizablePanelGroup>  );}export default function Demo() {  return <ResizablePreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

ResizableHandle

ResizableHandle props

ResizablePrimitive.SeparatorProps & {  withHandle?: boolean;} & { sound?: boolean }

sound: true

ResizablePanel

ResizablePanel props

ResizablePrimitive.PanelProps

ResizablePanelGroup

ResizablePanelGroup props

ResizablePrimitive.GroupProps

Source

Registry JSON