Componentes

Item

beta

Linha genérica de lista: mídia, título, apoio e ação. É o que evita cada tela inventar a própria linha.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/item

Playground

Ana Beatriz Souza

7º ano B · leitura em dia

Variantevariant

Tamanhosize

Títulochildren

Descriçãodescription

<Item>
  <ItemMedia variant="icon">
    <GraduationCap />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Ana Beatriz Souza</ItemTitle>
    <ItemDescription>7º ano B · leitura em dia</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">Ver perfil</Button>
  </ItemActions>
</Item>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.

ItemGroup
  └─ Item
    └─ ItemMedia
    └─ ItemContent
      └─ ItemTitle
      └─ ItemDescription
    └─ ItemActions
  └─ ItemSeparator
  └─ Item
    └─ ItemMedia
    └─ ItemContent
      └─ ItemTitle
      └─ ItemDescription
    └─ ItemActions

Uso

Uma linha de lista genérica: mídia, conteúdo e ação, sempre na mesma ordem. Um arquivo anexado a uma sessão é o caso mais simples.

relatorio-leitura.pdf

Anexado em 28 de agosto · 240 KB

Variantes

`default` é transparente e pede um fundo por trás. `outline` desenha a própria borda. `muted` marca o item como já lido ou resolvido, sem borda.

Outline

Muted

Tamanhos

`sm` e `xs` reduzem o espaçamento interno e a mídia junto — não é só a fonte que encolhe. Use `xs` dentro de um menu ou de um popover, nunca como lista principal da tela.

Default

Small

Extra small

Grupo com separador

`ItemGroup` marca `role="list"` e organiza vários itens com o mesmo espaçamento vertical. `ItemSeparator` divide um item do outro — uma lista de alunos é o exemplo mais comum.

Ana Beatriz Souza

7º ano B · leitura em dia

Caio Mendes Rocha

7º ano B · 2 sessões pendentes

Cabeçalho e rodapé

`ItemHeader` e `ItemFooter` são linhas que ocupam a largura inteira do item — porque o próprio `Item` quebra em `flex-wrap`. Use quando o conteúdo principal não cabe numa linha só ao lado da mídia.

Sessão de leitura em grupo

Hoje, 14h

4 alunos confirmados de 6 convidados.

Item não é Field

Item mostra informação sobre algo que já existe, com uma ação ao lado — não coleta dado. Assim que precisar de rótulo, campo de entrada e mensagem de erro, a peça certa é Field, não Item.

Ana Beatriz Souza

Matrícula 2026-0142 · 7º ano B

Com avatar

`ItemMedia` também aceita um Avatar no lugar do ícone — use quando o item representa uma pessoa. Sem foto hospedada, as iniciais em `AvatarFallback` bastam.

Caio Mendes Rocha

7º ano B · 2 sessões pendentes

Com imagem

`ItemMedia variant="image"` reserva um quadrado maior que o ícone, pensado para uma capa ou miniatura. Sem imagem hospedada, um bloco de cor com rótulo ocupa o lugar.

Trilha: Fábulas e narrativas curtas

7º ano B · 12 lições

Como link

`render` troca a `div` do Item por outro elemento — um link inteiro clicável, sem precisar embrulhar o item numa `<a>` por fora.

Ana Beatriz Souza

Ver perfil completo

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Item

Prop	Tipo	Padrão
size	"md" \| "xs" \| "sm" \| null	"md"
variant	"default" \| "outline" \| "muted" \| null	"default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ItemMedia

Prop	Tipo	Padrão
variant	"image" \| "default" \| "icon" \| null	"default"

Também aceita as props de React, incluindo className e os atributos de DOM.

ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemSeparator, ItemTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado

Anatomia: exemplo desta página
Demonstrações e playground: componente real de @voxmente/ui
Referência da API: TypeScript do pacote
Cor, espaçamento e raio das demonstrações: tokens de theme.css