reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Mission
Core Concepts
Core Concepts
Recipes
Adapters
Build & Operate
Agent Contract
Builder Rollout
Builder Manager
Rollout Playbook
Components · Workspaces
ShellPage
ListWorkspace
DetailWorkspace
EditorWorkspace
DashboardWorkspace
LandingWorkspace
Components · Layout
ShellProvider
ShellAppShell
ShellLandingPage
ShellFullscreenToolSurface
Components · Navigation
ShellCollapsibleNav
ShellNavItem
ShellNavGroup
ShellNavAccordion
Components · Panels
ShellResizableLayout
ShellResizeHandle
ShellBottomBar
ShellFlyoutAside
ShellHeaderStackProvider
Components · Helpers
ShellSection
ShellStateBoundary
ShellSpacing
ShellPolicyToggler
Components · Adapters
ShellDataGridAdapter
ShellEditorAdapter
Oopt-shell
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

ShellFlyoutAside

harness-panel

플라이아웃 사이드 패널. push/overlay 모드, 좌/우 위치, 배경 딤을 지원합니다.

100%

상세 정보

플라이아웃 패널 콘텐츠입니다.

ShellFlyoutAside Props

Prop타입기본값설명
children*ReactNode—패널 콘텐츠
open*boolean—열림 상태
onOpenChange*(open: boolean) => void—열림 상태 변경 콜백
widthnumber—패널 너비 (기본 360px)
mode"push" | "overlay"—패널 모드 (기본 overlay)
side"left" | "right"—패널 위치 (기본 right)
backdropboolean—오버레이 모드에서 배경 딤 표시 (기본 true)
labelstring—패널 aria-label

Import

tsx
import { ShellFlyoutAside } from "@reopt-ai/opt-shell";

키보드 동작

키동작
Esc패널 닫기
PreviousShellBottomBar문서
ShellBottomBar 페이지로 이동
NextShellHeaderStackProvider문서