Container

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

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}

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

SiguienteLogin