Resizable

Betav1.0.0

사용자가 마우스·키보드로 패널 크기를 조정할 수 있는 리사이저블 컨테이너. 가로/세로 + 중첩 + 키보드 (← → / ↑ ↓) 지원.

One

Two

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

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={50}>One</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Two</ResizablePanel>
</ResizablePanelGroup>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/resizable.json

Variants

Vertical

orientation="vertical" — 헤더/콘텐츠 분리에.

Header

Content

<ResizablePanelGroup orientation="vertical">
  <ResizablePanel defaultSize={50}>Header</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Content</ResizablePanel>
</ResizablePanelGroup>

Nested

가로 그룹 안에 세로 그룹을 중첩 — IDE 같은 복잡한 레이아웃.

Sidebar

Top

Bottom

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={30}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={70}>
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize={40}>Top</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={60}>Bottom</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>

Composition

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
react-resizable-panels	`4.11.2`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

이 컴포넌트는 WAI-ARIA separator 패턴을 따릅니다.

Keyboard interactions

Key	Description
`←→`	가로 방향 패널 크기 조정.
`↑↓`	세로 방향 패널 크기 조정.
`Home`	최소 크기.
`End`	최대 크기.
`Enter`	기본 크기 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1 4.1.2

Notes

•react-resizable-panels 가 role=separator + aria-valuenow 자동 부여.