Container

A max-width wrapper for page content with responsive padding and centering.

import { Container } from "@ninna-ui/layout"

pnpm add @ninna-ui/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Container component.

import { Container } from "@ninna-ui/layout";

export default function Example() {
  return (
    <Container maxWidth="lg">
      <h1>Page Content</h1>
      <p>Your content here...</p>
    </Container>
  );
}

Basic

Container with max-width constraint.

This content is wrapped in a Container with max-width "lg".

Max Widths

Different max-width options.

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

maxWidth="2xl"

maxWidth="full"

Padding

Control horizontal padding.

padding=true (default)

With horizontal padding

padding=false

No horizontal padding

Center

Center or left-align the container.

center=true (default)

Centered container

center=false

Left-aligned container

Use Cases

Common patterns using Container.

Page Layout

Header

Main content area

Article Layout (narrow)

Article Title

This is an article with a narrower container for better readability. Long-form content benefits from constrained widths.

API Reference

Complete list of props.

Props

Prop	Type	Default	Description
`maxWidth`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full' \| 'none'`	`'lg'`	Maximum width of the container
`center`	`boolean`	`true`	Center the container horizontally
`padding`	`boolean`	`true`	Add horizontal padding
`className`	`string`	-	Additional CSS classes

Accessibility

Container is a pure layout component
Use semantic elements like main, section, or article as children
Helps maintain readable line lengths for content