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

AppShell

Shell

Arrange header, sidebar, content, and footer regions. The sidebar stays visible by default; callers control responsive hiding or drawer behavior.

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

Live preview

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

100%

기본 사용

My App

대시보드

프로젝트 현황을 확인합니다.
메인 콘텐츠 영역

© 2026 My App

Usage examples

Application layout

AppShell

PropTypeDefaultDescription
childrenRequiredReactNode—AppShell.Header, AppShell.Sidebar, AppShell.Content, AppShell.Footer 자식 요소
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▼ USES (2)AppShellsidebarpage-header
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • Header, Content, Footer를 렌더링한다
  • Header는 header 요소이다
  • Header는 기본적으로 sticky를 강제하지 않는다
  • Content는 main 요소이다
  • Footer는 footer 요소이다

Related components

opt-ui

Sidebar

Shells

Compose collapsible navigation with header, content, footer, groups, and items, plus a Ctrl+[ shortcut.

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

opt-ui

CommandPalette

Shells

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

PreviousSidebarNextConfirmDialog