GoldTreeDevGTD UI

문서 제목, 아이콘 이름, 앱 이름으로 검색할 수 있어요.

전체 문서 보기 이동 · Enter 열기 · Esc 닫기

PageHeader

페이지 상단 헤더 영역이에요. 제목·설명·액션·브레드크럼을 조합해요.

사용법

기본

프로필 설정

계정 정보와 공개 범위를 관리할 수 있어요.

스타일 커스터마이징

PageHeaderclassNamestyle prop으로 루트 스타일을 덮어쓸 수 있어요.

<PageHeader className="rounded-full px-4" style={{ opacity: 0.9 }} />

인터페이스

PageHeaderProps

속성타입기본값설명
title*string페이지 제목
descriptionstring부제·설명
actionsReactNode우측 액션 영역
breadcrumbReactNode상단 브레드크럼
classNamestring루트 요소 클래스. Tailwind·커스텀 CSS 적용
styleCSSProperties인라인 스타일·CSS 변수(--gtd-*) 오버라이드

PageHeader 컴포넌트 Props 표

가져오기

import { PageHeader } from "@/components/ui/PageHeader";
PageHeader · GTD UI | GoldTreeDev Docs