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

BlockLayout

Component

Apply section spacing and optional semantic insets at a Block root, with automatic LoadingOverlay support.

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

Live preview

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

100%

Block 루트 레이아웃

프로젝트 개요

BlockLayout이 페이지 inset, Block spacing과 LoadingOverlay를 함께 관리합니다.

최근 상태

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

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

Usage examples

Block root

BlockLayout

PropTypeDefaultDescription
childrenRequiredReactNode—Block 콘텐츠
loadingboolean—로딩 상태. 설정 시 LoadingOverlay로 자동 래핑
loadingLabelstring—LoadingOverlay 접근성 레이블
spacing"section" | "group" | "element" | "none""section"Block 최상위 자식 사이 간격. 데이터 밀도가 높은 Block는 group/element로 낮출 수 있음
inset"section" | "group" | "element" | "none"—Block 안쪽 여백. 페이지 콘텐츠 경계에는 section을 사용하고, 이미 여백을 제공하는 Shell 안에서는 생략
classNamestring—기본 스타일 오버라이드
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • 섹션 간격 wrapper와 children을 렌더링한다
  • compact spacing으로 Surface 루트 간격을 낮출 수 있다
  • Surface root DOM props를 전달한다
  • loading이 false이면 추가 overlay wrapper 없이 Surface root를 렌더링한다
  • loading 상태에서 LoadingOverlay를 활성화한다

Related components

opt-ui

FieldToken

Core

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

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

PreviousResizableNextcreateBlock