Ravox KitSuperfícies
Item de lista
A linha de toda lista de painel: ícone, foto ou miniatura, título, descrição e ações no fim. Agrupa com fios entre os itens, separa por rótulos e pode ser clicável inteira sem pôr botões dentro de um link.
Contrato-clinica-sorriso.pdf
Enviado por Marina Rocha · 2,4 MB · ontem às 18:40
Ajustes
Variante
Tamanho
Mídia
Exemplos
Membros do time, com fios
MR
Marina Rocha
marina@sorriso.com.br
Dona
CN
Caio Nunes
caio@sorriso.com.br
Editor
LP
Lia Prado
Convite enviado há 2 dias
Pendente
Linhas clicáveis, com separador
Miniatura e duas ações
Aurora Em revisão
Landing · enviada hoje às 09:12
Sutil e compacto
Mercado Pago
Pix e cartão · conectado
Stripe
Cartão internacional · conectado
Instalação
O shadcn cria components/ui/item-lista.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/item-lista.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| variante | "padrao" | "contorno" | "sutil" | "padrao" | Sem moldura (para dentro de um cartão), com borda própria, ou fundo leve (ItemLista). |
| tamanho | "medio" | "compacto" | "medio" | Respiro da linha (ItemLista). |
| variante (mídia) | "icone" | "caixa" | "imagem" | "avatar" | "icone" | Ícone solto, ícone numa caixa neutra, miniatura quadrada ou foto redonda (ItemListaMidia). |
| divisorias | boolean | false | Fio entre os itens; sem ele, ficam com 4px de vão (ItemListaGrupo, que vira role="list"). |
| ItemListaSeparador | ComponentProps<"div"> | — | Fio entre grupos, com rótulo opcional como filho ("Fixados", "Ontem"). |
| ItemListaConteudo / Titulo / Descricao | ComponentProps<"div"> | — | Coluna do meio. O título corta com reticências; a descrição quebra em até 2 linhas. |
| ItemListaAcoes | ComponentProps<"div"> | — | Botões ou etiqueta no fim. Ficam acima do link e continuam clicáveis. |
| ItemListaLink | ComponentProps<"a"> & { asChild } | — | No título, deixa a linha inteira clicável; o foco pinta a linha toda. |