Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Stack

Pilha que organiza os filhos numa coluna ou numa linha, com um espaço da escala de espaçamento. Use para formulários, barras de ações, listas e tudo que corre numa direção só.

Padrão CSS flexboxComponente de servidorCódigo ↗
minimal · light · #3fa34d
direction
align
justify
wrap

Instalação

Configure o Camaleo uma vez (Instalação) e importe. Ele não tem estado, então renderiza no servidor.

import { Stack } from "@camaleo/react";

Anatomia

Um elemento flex com data-slot="stack". Stacks se aninham: este cabeçalho de página é uma linha cujos dois filhos são stacks também.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

As notas fiscais chegam aqui.

gap={1} · Rótulo e valor: uma ideia só

Fatura

nº 2026-118

Vencimento

20/11/2026

gap={3} · Itens de uma lista

gap={6} · Grupos separados

Cobrança

nº 2026-118

Entrega

Belo Horizonte

O espaço mostra o que anda junto

O gap conta passos de --cml-space, então o ritmo acompanha o estilo. Espaços pequenos juntam um rótulo ao valor; espaços grandes separam grupos.

Projetos

12 ativos

Cabeçalho de página

justify="space-between" põe o título de um lado e as ações do outro. Com wrap, as ações descem para baixo do título no celular.

Assuntos

  • Design systems
  • Acessibilidade
  • React
  • Desempenho
  • Tipografia
  • Modo escuro

Tags que quebram linha

Uma fileira de tags deve quebrar linha, não rolar para o lado nem espremer. Ela também é um ul, então o leitor de tela diz quantos assuntos são.

Lucas Andrade

Gerente de contas · Atlas

Linha ou coluna

Ligue o interruptor. Os mesmos três filhos passam de linha para coluna; só o direction muda, então a ordem de leitura continua a mesma.

Ordem do Tab 1

Ordem do Tab 2

Ordem do Tab 3

O Tab segue o que você vê: da esquerda para a direita.

Ordem visual igual à ordem do Tab

Ligue o row-reverse e aperte Tab: o foco começa pela direita. Para pôr a ação principal no fim, coloque por último no DOM e use justify="flex-end".

Espaço de trabalho

Membros

8 de 10 lugares

Armazenamento

34 GB de 100 GB

Plano

Equipe, mensal

Linhas com divisórias

O Stack não tem prop de divisória. Coloque um Separator entre os filhos e o gap distribui o espaço igual acima e abaixo.

De plantão esta semana

  • Beatriz Santos

    Backend

  • João Pereira

    Infraestrutura

  • Carla Mendes

    Frontend

Uma lista empilhada

as="ul" mantém a semântica de lista enquanto o Stack cuida do espaço. Tire os marcadores e o recuo com listStyle e padding.

Responsivo sem breakpoints

Não existem props de breakpoint. Dê a cada filho uma largura mínima com flex e ligue o wrap: três campos numa linha viram uma coluna no celular.

Em contexto

São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Resumo do pedido

Subtotal

R$ 412,00

Frete

R$ 18,90

Cupom BEMVINDO10

−R$ 41,20

TotalR$ 389,70
Resumo do pedidoCard · Stack · Separator · Button
Helena DuartePro

Designer de produto · São Paulo

Cabeçalho de perfilCard · Stack · Avatar · Badge · Button

Crie seu espaço de trabalho

Grátis por 14 dias. Sem cartão.

Formulário de cadastroCard · Stack · Field · Input · Checkbox

Boas práticas

Fatura nº 2026-118

Vence em 20/11/2026 · R$ 1.240,00

Pagamento por Pix, boleto ou cartão.

FaçaEspaço curto dentro do grupo, espaço largo entre grupos.

O título e o vencimento são lidos como uma coisa só, e a ação fica à parte.

Fatura nº 2026-118

Vence em 20/11/2026 · R$ 1.240,00

Pagamento por Pix, boleto ou cartão.

EviteO mesmo espaço em tudo.

Cada linha fica à mesma distância da próxima, e nada diz o que anda junto.

FaçaOrdene o DOM do jeito que se lê.

Cancelar vem primeiro e Publicar por último, empurrado para o fim com justify="flex-end". O Tab segue o olhar.

Eviterow-reverse para mover o botão principal.

Fica idêntico, mas o Tab começa pela direita e anda para a esquerda, e o leitor de tela lê Publicar antes de Cancelar.

Props

PropriedadeTipoPadrãoDescrição
as"div" | "section" | "ul" | "form" | …"div"Elemento renderizado, para a semântica certa (por exemplo as="ul").
direction"column" | "column-reverse" | "row" | "row-reverse""column"Eixo principal. Os valores -reverse só invertem o desenho: a leitura e o Tab continuam seguindo o DOM.
gapnumber0Espaço entre os filhos, em múltiplos de --cml-space (0.25rem por padrão): gap={4} = 1rem.
alignCSS align-items"stretch"Alinhamento no eixo cruzado (align-items).
justifyCSS justify-content"flex-start"Distribuição no eixo principal (justify-content).
wrapbooleanfalseDeixa os filhos quebrarem para a linha seguinte quando não cabem.

O as aceita as mesmas tags do Box. Todas as outras props vão para o elemento. O seu style entra depois das propriedades customizadas, então pode sobrescrever qualquer uma.

Styling hooks

Cada prop vira uma propriedade customizada no elemento. Deixe uma prop de fora e o seu CSS pode definir essa propriedade, por exemplo num breakpoint.

Atributos

data-slot"stack"

Tokens que ele lê

Só deste componente

--cml-space--cml-stack-align--cml-stack-direction--cml-stack-gap--cml-stack-justify--cml-stack-wrap
/* a barra de ações vira linha a partir de 40rem */
@media (min-width: 40rem) {
  .actions[data-slot="stack"] {
    --cml-stack-direction: row;
    --cml-stack-justify: flex-end;
  }
}

Acessibilidade

—O Stack não renderiza nenhum elemento interativo. O Tab passa pelos filhos na ordem do DOM.

Relacionados

GridQuando os itens precisam se alinhar em linhas e colunas.BoxA mesma escolha de elemento com as, sem o layout flex.SeparatorUma linha entre os filhos de um stack.
Esta página foi útil? · Editar esta página no GitHub