On this page

Container

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

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

pnpm add @ninna-ui/layout@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

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

Max Widths

Different max-width options.

Live preview/ Default

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

maxWidth="2xl"

maxWidth="full"

Padding

Control horizontal padding.

Live preview/ Default

padding=true (default)

With horizontal padding

padding=false

No horizontal padding

Center

Center or left-align the container.

Live preview/ Default

center=true (default)

Centered container

center=false

Left-aligned container

Use Cases

Common patterns using Container.

Live preview/ Default

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
`as`	`ElementType`	`—`	Semantic HTML element to render
`maxWidth`	`ContainerMaxWidth`	`'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