Container

The Container component provides a responsive wrapper that constrains content to a maximum width and centers it horizontally. It is the foundational building block for page-level layouts, ensuring consistent margins and padding across breakpoints.

Import

import { Container } from '@nim-ui/components';

Basic Usage

Default container (max-width: xl) with padding

Code

<Container>
  <p>Content constrained to max-width xl with horizontal padding.</p>
</Container>

Max Width

The maxWidth prop controls the maximum width of the container. It maps directly to Tailwind's max-w-screen-* utilities.

xl (default)

2xl

full

Code

<Container maxWidth="sm">Small container</Container>
<Container maxWidth="md">Medium container</Container>
<Container maxWidth="lg">Large container</Container>
<Container maxWidth="xl">Extra large container (default)</Container>
<Container maxWidth="2xl">2XL container</Container>
<Container maxWidth="full">Full width container</Container>

Padding

The padding prop controls whether horizontal padding is applied. Padding is responsive: px-4 on mobile, px-6 on small screens, and px-8 on large screens.

With padding (default)

Without padding

Code

<Container padding={true}>
  With responsive horizontal padding (default)
</Container>

<Container padding={false}>
  No horizontal padding - content reaches the edges
</Container>

Props

Name	Type	Default	Description
`maxWidth`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`	`'xl'`	Maximum width constraint for the container
`padding`	`boolean`	`true`	Apply responsive horizontal padding (px-4 sm:px-6 lg:px-8)
`className`	`string`	-	Additional CSS classes to apply
`children*`	`ReactNode`	-	Content to render inside the container

Usage Examples

Page Layout

function PageLayout({ children }) {
  return (
    <Container maxWidth="xl">
      <header className="py-6">
        <nav>Navigation</nav>
      </header>
      <main>{children}</main>
      <footer className="py-8">Footer content</footer>
    </Container>
  );
}

Nested Containers

function LandingPage() {
  return (
    <>
      {/* Full-width hero background */}
      <div className="bg-primary-500">
        <Container maxWidth="lg">
          <h1>Welcome to our platform</h1>
        </Container>
      </div>

      {/* Narrower content section */}
      <Container maxWidth="md">
        <article>
          <p>This content is constrained to a narrower width for readability.</p>
        </article>
      </Container>
    </>
  );
}

Full-Width Section Inside Container

function Dashboard() {
  return (
    <Container maxWidth="2xl">
      <h1>Dashboard</h1>
      <Container maxWidth="full" padding={false}>
        <div className="overflow-x-auto">
          <table>{/* Wide table content */}</table>
        </div>
      </Container>
    </Container>
  );
}

Accessibility

The Container component renders a semantic <div> element. It does not add any ARIA attributes by default. For landmark regions, wrap the Container in an appropriate semantic element or add a role attribute:

<main>
  <Container>
    <h1>Main Content</h1>
  </Container>
</main>

<Container role="region" aria-label="Featured content">
  <p>Featured section</p>
</Container>

Grid - CSS Grid layout for multi-column content
Stack - Vertical or horizontal stacking with spacing
Flex - Flexbox layout utility

On this page