Container

Centered content container with configurable max-width for page layouts.

Import

import { Container } from 'asterui'

Examples

Basic Usage

Container provides centered content with max-width and responsive padding.

</>

Page Content

Content is centered with max-width constraint.

import { Container } from 'asterui'

function App() {
  return (
      <Container>
        <h1>Page Content</h1>
        <p>Content is centered with max-width constraint.</p>
      </Container>
    )
}

export default App

Page Layout

Typical usage for page content.

</>

Page Title

Description

Main content area

import { Container, Space } from 'asterui'

function App() {
  return (
      <Container size="lg">
        <Space direction="vertical" size="lg">
          <header>
            <h1 className="text-3xl font-bold">Page Title</h1>
            <p className="text-base-content/70">Description</p>
          </header>
          <main className="bg-base-200 p-6 rounded-lg">
            <p>Main content area</p>
          </main>
        </Space>
      </Container>
    )
}

export default App

API

Container

Property	Description	Type	Default
children	Container content	React.ReactNode	-
size	Max width size	'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'	'xl'
centered	Center container horizontally	boolean	true
padding	Add horizontal padding	boolean	true
className	Additional CSS classes	string	-