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

Container

Component

Center page content within a configurable maximum width.

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

Live preview

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

100%

기본 사용

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

Container

PropTypeDefaultDescription
childrenRequiredReactNode—래핑할 콘텐츠
maxWidth"sm" | "md" | "lg" | "xl" | "2xl" | "full""xl"최대 너비 크기
centerbooleantrue중앙 정렬 여부 (mx-auto)
classNamestring—커스텀 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • children을 렌더링한다
  • 기본 maxWidth는 xl이다
  • center=false이면 mx-auto가 없다
  • maxWidth prop을 적용한다

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

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.

PreviousScrollAreaNextSection