componentes / container

Container

Wrapper centralizado com largura máxima e padding lateral responsivo.

Como usar

Envolva uma página ou seção para o conteúdo nunca ficar largo demais. Ele aplica 16px de padding lateral no mobile, 24px a partir de `sm` e 32px a partir de `lg`. É apresentacional, então funciona também em Server Components.

preview

Container sm

Container.tsx

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

Tamanhos

preview

full

tamanhos.tsx

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

Props

Prop	Valores	Padrão	Descrição
size	sm \| md \| lg \| xl \| full	lg	Largura máxima: 672 / 896 / 1152 / 1280px / nenhuma
padded	boolean	true	Padding lateral responsivo
as	ElementType	"div"	Elemento ou componente a renderizar (`section`, `ul`, `main`...)
className	string	nenhum	Mesclado às classes base; toda prop nativa é repassada

Acessibilidade

Renderiza um `<div>` simples por padrão, sem papel próprio.
Use `as` para dar a ele um elemento de landmark como `main`, `section`, `header` ou `footer`.
Só define largura e padding: não tem foco, teclado nem comportamento ARIA, e props extras como `aria-label` vão para o elemento.

Tenha em mente

Um `section` só vira landmark quando tem nome acessível: passe `aria-label` ou `aria-labelledby`.