Skip to content
Nim UI

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

View 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.

Max Width Variants

View 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 and Without Padding

View 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