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

Section

Component

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

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

Live preview

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

100%

기본 사용

기본 정보

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

폼 필드 영역

고급 설정

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

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

Section

PropTypeDefaultDescription
childrenRequiredReactNode—섹션 콘텐츠
titlestring—섹션 제목 (h3)
descriptionstring—제목 아래 설명 텍스트
classNamestring—커스텀 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • children을 렌더링한다
  • section 요소로 렌더링한다
  • 제목이 있으면 aria-labelledby를 설정한다
  • 제목이 없으면 aria-labelledby가 없다
  • 설명을 렌더링한다

Related components

opt-ui

Card

Core

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

opt-ui

PageHeader

Core

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

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

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.

PreviousContainerNextResizable