Container

Constrains and centers content horizontally based on screen breakpoints.

Max-width Medium Container

This container is constrained to a medium size (max-width: 768px) and centered on the page.

default.tsx

1'use client';
2
3import React from 'react';
4import { Container } from '../../layout/container';
5
6export function Default() {
7  return (
8    <Container
9      size="md"
10      align="center"
11      className="border-border bg-card rounded-xl border p-6 text-center"
12    >
13      <h3 className="mb-2 text-lg font-semibold">Max-width Medium Container</h3>
14      <p className="text-muted-foreground text-sm">
15        This container is constrained to a medium size (max-width: 768px) and centered on the page.
16      </p>
17    </Container>
18  );
19}

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

NextLogin