Container

Constrains and centers content horizontally based on screen breakpoints.

Article

Readable by design

A container caps content at a comfortable measure and keeps it centered, so long text never stretches across the whole viewport. The dashed edge marks the page; the card stays inside the constraint.

1'use client';
2
3import { Container } from '@/components/ui/container';
4
5export function Default() {
6  return (
7    <div className="border-border bg-hatch w-full rounded-xl border py-8">
8      <Container size="sm" align="center">
9        <article className="border-border bg-card rounded-xl border p-6">
10          <p className="text-primary text-xs font-medium tracking-wide uppercase">Article</p>
11          <h3 className="mt-2 text-lg font-semibold">Readable by design</h3>
12          <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
13            A container caps content at a comfortable measure and keeps it centered, so long text
14            never stretches across the whole viewport. The dashed edge marks the page; the card
15            stays inside the constraint.
16          </p>
17        </article>
18      </Container>
19    </div>
20  );
21}

Installation

pnpm dlx nachui add container

Anatomy

1import { Container } from '@/components/ui/container';

1<Container size="md" align="center">
2  <p>Centered content inside a medium container.</p>
3</Container>

API Reference

Container

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element type to render the component as
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'fluid'`	`'xl'`	Container size mapping to max-width breakpoints
`align`	`'left' \| 'center' \| 'right'`	`'center'`	Horizontal alignment of the container itself
`className`	`string`	-	Custom CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousGrid

NextAspect Ratio