componentes / container

Container

Contenedor centrado con ancho máximo y padding lateral responsivo.

Cómo usar

Envuelve una página o sección para que el contenido nunca quede demasiado ancho. Aplica 16px de padding lateral en móvil, 24px desde `sm` y 32px desde `lg`. Es presentacional, por lo que funciona también en Server Components.

preview

Container sm

Container.tsx

import { Container } from "vaiperui";
 
<Container size="md" as="main">
  <h1>Title</h1>
</Container>

Tamaños

preview

full

tamanos.tsx

<Container size="sm" />
<Container size="md" />
<Container size="full" padded={false} />

Props

Prop	Valores	Predeterminado	Descripción
size	sm \| md \| lg \| xl \| full	lg	Ancho máximo: 672 / 896 / 1152 / 1280px / ninguno
padded	boolean	true	Padding lateral responsivo
as	ElementType	"div"	Elemento o componente a renderizar (`section`, `ul`, `main`...)
className	string	ninguno	Se combina con las clases base; toda prop nativa se reenvía

Accesibilidad

Renderiza un `<div>` simple por defecto, sin rol propio.
Usa `as` para darle un elemento de landmark como `main`, `section`, `header` o `footer`.
Solo define ancho y padding: no tiene foco, teclado ni comportamiento ARIA, y las props extra como `aria-label` van al elemento.

Ten en cuenta

Un `section` solo se vuelve landmark cuando tiene nombre accesible: pasa `aria-label` o `aria-labelledby`.