Container

Restringe y centra el contenido horizontalmente en función de los puntos de interrupción de la pantalla.

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}

Instalación

pnpm dlx nachui add container

Anatomía

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

1<Container size="md" align="center">
2  <p>Contenido centrado dentro de un contenedor mediano.</p>
3</Container>

Referencia de API

Container

Prop	Tipo	Por defecto	Descripción
`as`	`React.ElementType`	`'div'`	El tipo de elemento HTML para renderizar el componente
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'fluid'`	`'xl'`	Ancho máximo del contenedor basado en breakpoints
`align`	`'left' \| 'center' \| 'right'`	`'center'`	Alineación horizontal del contenedor en la pantalla
`className`	`string`	-	Clases CSS personalizadas

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorGrid

SiguienteAspect Ratio