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

PageHeader

Component

Arrange a page title, status, tabs, actions, and query controls to fit the available width.

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

Live preview

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

100%

목록 · 분석 · 상세 페이지

세션 리플레이

최근 7일
조회당 2 크레딧

이벤트 탐색

사용 가이드

주간 전환 리포트

변경 사항 있음

PageHeader

PropTypeDefaultDescription
titleRequiredReactNode—페이지 제목
descriptionReactNode—제목 아래 설명 텍스트
actionsReactNode—오른쪽에 표시할 액션 슬롯 (버튼 등)
headingLevel1 | 2 | 3—제목 수준, 기본 h2
leadingReactNode—뒤로 가기 등 선행 탐색
titleAddonReactNode—제목 안내 또는 부가 요소
contextReactNode—현재 대상과 상태
navigationReactNode—페이지 탭과 보기 전환
primaryActionPageHeaderAction—페이지의 단일 주요 작업
secondaryActionsPageHeaderAction[]—동일한 md 크기의 보조 작업과 링크
toolbarReactNode—조회 조건 영역
statusReactNode—작업 버튼과 구분되는 읽기 전용 운영 상태
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (1)app-shellPageHeader
View test results

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • 제목을 렌더링한다
  • 설명을 렌더링한다
  • 액션 슬롯을 렌더링한다
  • 설명이 없으면 p 태그가 없다

Related components

opt-ui

Card

Core

Group content in a card with Header, Title, Description, Content, and Footer components.

opt-ui

ScrollArea

Core

Provide custom scrollbars for vertical, horizontal, or bidirectional scrolling.

opt-ui

Container

Core

Center page content within a configurable maximum width.

opt-ui

Section

Core

Apply semantic section spacing and automatically associate a heading through aria-labelledby.

opt-ui

Resizable

Core

Create draggable split-panel layouts with react-resizable-panels.

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

PreviousSliderNextScrollArea