reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
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.

Explore/Core/PageHeader

PageHeader

Component

페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.

layout
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

프로젝트 설정

프로젝트의 기본 정보와 환경을 관리합니다.

대시보드

사용자 목록

등록된 사용자를 검색하고 관리합니다.

Related components

Card

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

Layout

ScrollArea

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

Layout

Container

최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.

Layout

Section

시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.

Layout

Resizable

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

Layout

SurfaceLayout

Surface 루트 레이아웃. flex + 기본 section spacing 적용, loading prop으로 LoadingOverlay 자동 래핑.

Layout
PreviousSliderNextScrollArea

기본 사용

카드 제목

카드에 대한 설명입니다.

카드 본문 콘텐츠가 여기에 들어갑니다.

변형

Default
Outline
Ghost

패딩 크기

Small
Medium
Large

기본 사용

수직 스크롤

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

수평 스크롤

1
2
3
4
5
6
7
8
9
10

기본 사용

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

기본 사용

기본 정보

프로젝트의 기본 설정을 관리합니다.

폼 필드 영역

고급 설정

고급 설정 영역
추가 옵션 영역

제목 없는 섹션 (aria-labelledby 미설정)

기본 사용

수평 분할

패널 A
패널 B

수직 분할

상단
하단

Surface 루트 레이아웃

프로젝트 개요

SurfaceLayout이 Surface spacing과 LoadingOverlay를 함께 관리합니다.

최근 상태

Surface 내부 카드와 섹션이 기본 간격 규칙에 맞춰 배치됩니다.

로딩이 켜지면 전체 Surface가 한 번에 오버레이 처리됩니다.