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

Flyout

Shell

Inspect a record beside its list in a nonmodal panel with Escape dismissal and focus restoration.

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

Live preview

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

100%

목록 문맥을 유지하는 고객 상세

행을 선택해도 목록과 필터 문맥은 그대로 유지됩니다.

Usage guidance

Best practices

  • Use to preview a row from a list. Also provide a separate detail page when deep links are needed.
  • On wide screens, use type="inline" to place it beside the list.

Usage to avoid

  • Use Dialog for destructive actions that require confirmation.

Flyout

PropTypeDefaultDescription
openRequiredboolean—열림 상태
onCloseRequired() => void—닫기 핸들러
titleReactNode—패널 제목
descriptionReactNode—제목 아래 한 줄 설명
type"overlay" | "inline""overlay"overlay는 페이지 위에 띄우고, inline은 aside로 렌더해 배치를 부모 레이아웃에 맡긴다
side"right" | "left""right"overlay일 때 붙는 방향
size"sm" | "md" | "lg""md"패널 너비
actionsReactNode—닫기 버튼 앞 컨트롤
footerReactNode—하단 고정 영역
scrimbooleanfalse뒤 페이지를 어둡게. 기본 off — 목록이 계속 읽혀야 한다
closeOnOutsideClickbooleantrue바깥 클릭 시 닫기 (overlay 전용)
hideCloseButtonbooleanfalse닫기 버튼 숨김
labelsFlyoutLabels—문구 오버라이드
childrenRequiredReactNode—패널 본문
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

키보드 동작

키동작
Escape패널 닫고 여는 컨트롤로 포커스 복귀

Related components

opt-ui

QueryResultsTable

Shells

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

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.

PreviousScoreBreakdownNextComparisonSelector