reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
InspectorLayout
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.

InspectorLayout

Shell

Arrange a list and inspector in two panes with push or overlay behavior and focus restoration when closed.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { InspectorLayout } from "@reopt-ai/opt-ui";

Live preview

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

100%

List and inspector

Usage guidance

Best practices

  • Use when users frequently move between a list and item details. It keeps the list available while details are open.
  • Derive open, title, and inspector from the selected item, and clear selection in onClose. List children remain mounted while the panel is open.
  • The panel uses overlay below breakpoint and push above it. On narrow screens, verify closing and focus return to the list.

Usage to avoid

  • Use ConfirmDialog for destructive actions that require confirmation.
  • Let Flyout restore focus. Duplicating focus handling in the parent can misidentify the element that opened the panel.

Usage examples

Select a list item and close its details panel

InspectorLayout

PropTypeDefaultDescription
childrenRequiredReactNode—목록. 인스펙터가 열려도 마운트와 스크롤을 유지
inspectorReactNode—인스펙터 내용. 닫혀 있으면 렌더하지 않음
openRequiredboolean—열림
onCloseRequired() => void—닫기
titleReactNode—인스펙터 제목
descriptionReactNode—제목 아래 한 줄
actionsReactNode—닫기 버튼 옆 컨트롤
footerReactNode—인스펙터 하단
breakpoint"lg" | "xl" | "2xl""xl"이 폭 이상이면 push
width"sm" | "md" | "lg""md"push 레이아웃에서의 인스펙터 폭
labelsInspectorLayoutLabels—닫기 버튼 등 인스펙터 문구
classNamestring—추가 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

InspectorLayout 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

PreviousFieldSidebarNextQueryFilterBar