Component

Container

Constrain page content with responsive max widths, horizontal padding tokens, and semantic element overrides.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Container } from "@chitrank2050/monoline-ui/container"

Basic usage

<Container size="md" as="section">
  <h2>Project highlights</h2>
  <p>Constrained content with responsive inline padding.</p>
</Container>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Container keeps a page or major section at a consistent responsive width.

Avoid when

You are arranging a local flex or grid layout that does not need a maximum page width.

Accessibility

Container is a div by default and accepts as for landmarks such as main or section, so choose the semantic element that matches the enclosed content.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgMax width and padding scale

asElementTypeSemantic element override

childrenReactNodeContained page content

classNamestringAdditional class names

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-container-maxCSS varCurrent max-width for the selected size

--ml-container-xCSS varMobile inline padding

--ml-container-x-tabletCSS varTablet inline padding

--ml-container-x-desktopCSS varDesktop inline padding

Implementation

The source used by the example above, including any state it needs.

import { Container } from "@chitrank2050/monoline-ui/container"

export function PageSection() {
  return (
    <Container size="lg" as="section">
      <h2>Project highlights</h2>
      <p>Use Container for page sections, docs content, and marketing blocks.</p>
    </Container>
  )
}

Compare related components or review the package and theme setup.

01ComponentSection HeadComponent · ReferenceReference→02ComponentNavbarComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview