reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Resizable
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Resizable

Component

Create draggable split-panel layouts with react-resizable-panels.

layout
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

수평 분할

패널 A
패널 B

수직 분할

상단
하단

ResizablePanelGroup

PropTypeDefaultDescription
directionRequired"horizontal" | "vertical"—패널 분할 방향
childrenRequiredReactNode—ResizablePanel + ResizableHandle 조합
idstring—그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID
defaultLayoutRecord<string, number>—패널 ID별 초기 비율(0-100)
onLayoutChanged(layout: Record<string, number>) => void—드래그가 끝난 뒤 확정된 레이아웃 콜백
groupRefRef<ResizablePanelGroupHandle>—레이아웃 조회·설정을 위한 명령형 그룹 ref
autoSaveIdstring—id의 deprecated 별칭
classNamestring—커스텀 CSS 클래스

ResizablePanel

PropTypeDefaultDescription
defaultSizenumber | string—초기 크기. 숫자는 퍼센트, 문자열은 명시한 CSS 단위
minSizenumber | string—최소 크기. 숫자는 퍼센트
maxSizenumber | string—최대 크기. 숫자는 퍼센트
collapsiblebooleanfalse최소 크기 이하 시 접히기 허용
onResize(size: ResizablePanelSize, id?: string | number, previous?: ResizablePanelSize) => void—패널 크기 변경 콜백
panelRefRef<ResizablePanelHandle>—접기·펼치기·크기 제어를 위한 명령형 패널 ref
childrenRequiredReactNode—패널 콘텐츠
classNamestring—커스텀 CSS 클래스

ResizableHandle

PropTypeDefaultDescription
withHandlebooleanfalse시각적 드래그 핸들 표시
disabledboolean—드래그 및 키보드 리사이즈 비활성화
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (2)query-output-panequery-workspaceResizable
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • 패널 콘텐츠를 렌더링한다
  • withHandle이 시각적 핸들을 렌더링한다
  • withHandle 없으면 svg가 없다

Related components

opt-ui

Card

Core

Group content in a card with Header, Title, Description, Content, and Footer components.

opt-ui

PageHeader

Core

Arrange a page title, status, tabs, actions, and query controls to fit the available width.

opt-ui

ScrollArea

Core

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

opt-ui

Container

Core

Center page content within a configurable maximum width.

opt-ui

Section

Core

Apply semantic section spacing and automatically associate a heading through aria-labelledby.

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

PreviousSectionNextBlockLayout