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

PageAside

Shell

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

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

Live preview

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

100%

Header + Nav + Footer 3-slot

Docs

설치
빠른 시작
토큰
Shells

4 sections

메인 콘텐츠 영역

Header / Footer 없이 Nav만

설치
빠른 시작
토큰
Shells
콘텐츠

Slot padding override — headerClassName / bodyClassName

Explore

넓은 header padding으로 타이틀+부연 설명 레이아웃

설치
빠른 시작
토큰
Shells

12 components

콘텐츠

PageAside

PropTypeDefaultDescription
headerReactNode—상단 고정 슬롯 (예: package switcher).
childrenRequiredReactNode—스크롤 가능한 네비게이션 영역.
footerReactNode—하단 고정 슬롯 (예: version label).
widthClassNamestring—너비 Tailwind 클래스. 기본값 `w-60`.
labelstring—`<aside>`의 aria-label.
hideOnMobileboolean—md 아래에서 숨김. 기본값 true.
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • header/children/footer 3-slot을 렌더링한다
  • <aside> 요소로 렌더링하고 aria-label이 있다
  • header/footer가 없으면 그 슬롯을 생략한다
  • widthClassName이 aside에 적용된다
  • headerClassName/bodyClassName/footerClassName이 해당 슬롯의 기본 padding을 교체한다

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

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.

opt-ui

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

PreviousFaqAccordionNextContentTabs