Resizable | Cortexcn

Sidebar

Content

Installation

pnpm dlx shadcn@latest add @cortexcn/resizable

pnpm dlx shadcn@latest add @cortexcn/resizable

Usage

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

Examples

Horizontal

Sidebar

Content

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

export function ResizableHorizontal() {
  return (
    <div className="flex flex-col gap-6">
      <ResizablePanelGroup
        orientation="horizontal"
        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"
      >
        <ResizablePanel defaultSize="25%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Sidebar</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="75%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Content</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"export function ResizableHorizontal() {  return (    <div className="flex flex-col gap-6">      <ResizablePanelGroup        orientation="horizontal"        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"      >        <ResizablePanel defaultSize="25%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Sidebar</span>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize="75%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Content</span>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Vertical

Header

Content

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

export function ResizableVertical() {
  return (
    <div className="flex flex-col gap-6">
      <ResizablePanelGroup
        orientation="vertical"
        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"
      >
        <ResizablePanel defaultSize="25%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Header</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="75%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Content</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"export function ResizableVertical() {  return (    <div className="flex flex-col gap-6">      <ResizablePanelGroup        orientation="vertical"        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"      >        <ResizablePanel defaultSize="25%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Header</span>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize="75%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Content</span>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

With handle

Sidebar

Content

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

export function ResizableWithHandle() {
  return (
    <div className="flex flex-col gap-6">
      <ResizablePanelGroup
        orientation="horizontal"
        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"
      >
        <ResizablePanel defaultSize="25%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Sidebar</span>
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="75%">
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Content</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"export function ResizableWithHandle() {  return (    <div className="flex flex-col gap-6">      <ResizablePanelGroup        orientation="horizontal"        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"      >        <ResizablePanel defaultSize="25%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Sidebar</span>          </div>        </ResizablePanel>        <ResizableHandle withHandle />        <ResizablePanel defaultSize="75%">          <div className="flex h-full items-center justify-center p-6">            <span className="font-semibold">Content</span>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Nested

One

Two

Three

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

export function ResizableNested() {
  return (
    <div className="flex flex-col gap-6">
      <ResizablePanelGroup
        orientation="horizontal"
        className="rounded-lg border style-lyra:rounded-none style-sera:rounded-none"
      >
        <ResizablePanel defaultSize="50%">
          <div className="flex h-[200px] items-center justify-center p-6">
            <span className="font-semibold">One</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="50%">
          <ResizablePanelGroup orientation="vertical">
            <ResizablePanel defaultSize="25%">
              <div className="flex h-full items-center justify-center p-6">
                <span className="font-semibold">Two</span>
              </div>
            </ResizablePanel>
            <ResizableHandle />
            <ResizablePanel defaultSize="75%">
              <div className="flex h-full items-center justify-center p-6">
                <span className="font-semibold">Three</span>
              </div>
            </ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"export function ResizableNested() {  return (    <div className="flex flex-col gap-6">      <ResizablePanelGroup        orientation="horizontal"        className="rounded-lg border style-lyra:rounded-none style-sera:rounded-none"      >        <ResizablePanel defaultSize="50%">          <div className="flex h-[200px] items-center justify-center p-6">            <span className="font-semibold">One</span>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize="50%">          <ResizablePanelGroup orientation="vertical">            <ResizablePanel defaultSize="25%">              <div className="flex h-full items-center justify-center p-6">                <span className="font-semibold">Two</span>              </div>            </ResizablePanel>            <ResizableHandle />            <ResizablePanel defaultSize="75%">              <div className="flex h-full items-center justify-center p-6">                <span className="font-semibold">Three</span>              </div>            </ResizablePanel>          </ResizablePanelGroup>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Controlled

30%

70%

import * as React from "react"
import type { Layout } from "react-resizable-panels"
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"

export function ResizableControlled() {
  const [layout, setLayout] = React.useState<Layout>({})

  return (
    <div className="flex flex-col gap-6">
      <ResizablePanelGroup
        orientation="horizontal"
        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"
        onLayoutChange={setLayout}
      >
        <ResizablePanel defaultSize="30%" id="left" minSize="20%">
          <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
            <span className="font-semibold">
              {Math.round(layout.left ?? 30)}%
            </span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="70%" id="right" minSize="30%">
          <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
            <span className="font-semibold">
              {Math.round(layout.right ?? 70)}%
            </span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}

import * as React from "react"import type { Layout } from "react-resizable-panels"import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"export function ResizableControlled() {  const [layout, setLayout] = React.useState<Layout>({})  return (    <div className="flex flex-col gap-6">      <ResizablePanelGroup        orientation="horizontal"        className="min-h-[200px] rounded-lg border style-lyra:rounded-none style-sera:rounded-none"        onLayoutChange={setLayout}      >        <ResizablePanel defaultSize="30%" id="left" minSize="20%">          <div className="flex h-full flex-col items-center justify-center gap-2 p-6">            <span className="font-semibold">              {Math.round(layout.left ?? 30)}%            </span>          </div>        </ResizablePanel>        <ResizableHandle />        <ResizablePanel defaultSize="70%" id="right" minSize="30%">          <div className="flex h-full flex-col items-center justify-center gap-2 p-6">            <span className="font-semibold">              {Math.round(layout.right ?? 70)}%            </span>          </div>        </ResizablePanel>      </ResizablePanelGroup>    </div>  )}

Adapted from the shadcn/ui Resizable (MIT).