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.

ShellSection

harness-helper

시맨틱 콘텐츠 그룹. 제목, 설명, 액션 슬롯을 갖고 card/none 프레임을 지원합니다.

100%

기본 섹션

frame=none (기본값)

섹션 콘텐츠가 여기에 표시됩니다.

카드 프레임

frame=card로 감싸진 섹션

Card 프레임으로 감싸진 콘텐츠입니다.

ShellSection Props

Prop타입기본값설명
children*ReactNode—섹션 콘텐츠
titleReactNode—섹션 제목
descriptionReactNode—섹션 설명
actionReactNode—헤더 액션 슬롯
frame"none" | "card"—프레임 스타일 (기본 none)

Import

tsx
import { ShellSection } from "@reopt-ai/opt-shell";
PreviousShellHeaderStackProvider문서
ShellHeaderStackProvider 페이지로 이동
NextShellStateBoundary문서