Resizable

Panels you can drag apart, with a quiet divider that wakes up on hover, sizes that glide on reset or collapse, and layouts that persist.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/resizable

npx layro-cli add @preetsuthar17/resizable

npx layro-cli add @preetsuthar17/resizable

bunx layro-cli add @preetsuthar17/resizable

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import { cn } from "cn"
import * as ResizablePrimitive from "react-resizable-panels"

function useMergedElementRef<T>(
  own: React.RefObject<T | null>,
  external: React.Ref<T | null> | undefined
) {
  return React.useCallback(
    (node: T | null) => {
      own.current = node
      if (typeof external === "function") {