Componentes
Card
A superfície padrão do produto:
rounded-xl, borda de 1px e um fio de sombra. Quase plano em repouso — e é justamente por ser plano que ele consegue acender no foco enquanto os irmãos apagam.src/components/ui/card.tsxdata-slot="card"42 usos em 28 arquivos
Anatomia
Cinco peças, e o ritmo vertical já vem pronto: py-6 no card, px-6 nas partes, gap-6 entre elas.
Ocupação da agenda
Esta semana, de segunda a sábado.
agendados 124 · capacidade 200
ui/card.tsx — a classe do Card
flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-xs [transition:border-color_150ms,box-shadow_150ms,opacity_300ms] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-brand-muted motion-reduce:[transition:none]
| Prop | Tipo | Padrão | O que faz |
|---|---|---|---|
| CardTitle as | "div" | "h1" | "h2" | "div" | Existe por acessibilidade, não por estilo. Na maioria dos usos o card é um bloco DENTRO de uma tela que já tem seu h1; promover todos criaria vários títulos de nível 1. Mas nas telas de acesso o card É a tela — ali, as="h1", senão a página fica sem heading nenhum e quem navega por títulos não encontra a tela de login. |
| className | string | — | Composto por cn() — a classe do chamador vence. Use pra largura e col-span, não pra trocar raio ou sombra. |
Não existem CardFooter nem CardAction: o rodapé é uma linha dentro do CardContent, e a ação do cabeçalho entra no CardHeader com justify-between. Menos peças, menos jeitos de divergir.
Vivo ao toque
A regra que dá nome à assinatura do produto — e ela mora no CSS global, não no componente. Toque no campo abaixo.
Dados da clínica
O cabeçalho é
data-dim-keep: fura o véu e continua legível enquanto se edita.| Momento | O que o card faz |
|---|---|
| Repouso | border-border + shadow-xs. Quase plano. |
| Controle interno em foco | border-brand + ring-[3px] ring-brand-muted, em 150ms. |
| Um bloco data-dim em edição na página | O card RECUA: ganha uma película de 40% e devolve a borda neutra — o único destaque em cena passa a ser o bloco elevado. |
| Cabeçalho durante a edição | data-dim-keep fura a película e fica aceso. |
NotaPor que a regra é global e não uma prop
[data-slot="card"] em globals.css alcança todo card do app sem que nenhum card saiba disso. Regra solta fora de @layer vence qualquer utility do Tailwind v4 — é o que permite o card devolver a borda sem !important, e o que exige cuidado: position: relative ali sobrescreveria um sticky de classe, se algum card usasse.Cartão de número
O molde que o app usa pra mostrar um número que importa: ícone + título, o valor grande em tabular, e um rodapé que dá o contexto (ou o alerta).
Cadastros
207
12 novos esta semana
Comparecimento
84%
vs. 79% no mês passado
Sem responder
8
há mais de 24h
| Peça | Receita |
|---|---|
| Moldura | rounded-xl border border-border bg-surface px-4 py-3 sm:px-5 |
| Título | text-sm font-semibold, com o ícone do domínio à esquerda |
| Valor | text-2xl font-bold tracking-tight tabular-nums |
| Rodapé | text-xs text-fg-subtle — ou text-warning-strong quando é alerta |
| Valor menor dentro de um bloco (a “cifra”) | text-xl font-semibold tabular-nums + rótulo text-xs text-fg-subtle |
NotaNúmero não é filtro
Estes cartões INFORMAM. Quem filtra a lista é o chip de recorte da toolbar — outra peça, outra forma (ver Anatomia de uma tela). Misturar os dois faz a pessoa clicar num número esperando que a lista mude.
Card clicável
Se o card inteiro é um alvo, ele precisa dizer isso antes do clique. Aqui o app ainda fala três dialetos — e essa é uma decisão aberta, não um canon.
Marina Alvez
Retorno · quinta, 14h
Bom dia! Consigo remarcar?
Armadilha já pagaAberto: três receitas de hover, nenhuma eleita
As três acima estão em produção hoje, em telas diferentes. Enquanto não houver decisão, copie a da tela vizinha em vez de inventar uma quarta — e trate isto como pendência de design system, não como liberdade. O que já é regra: o alvo tem
focus-ring, é <button> ou <a> de verdade (nunca div com onClick), e a transição fica entre 150 e 200ms.Cabeçalho em card próprio (split)
Quando o que EXPLICA o conceito e o que OPERA a lista disputam o mesmo retângulo, eles se separam.
Insumos
O que se gasta por procedimento. Cada insumo entra no custo da ficha e no preço sugerido.
Luva de procedimentoR$ 0,24/un
Agulha 30GR$ 0,31/un
Sim
Equipe
Quem entra na clínica.
Conteúdo do card.
Título e descrição à esquerda, ação à direita, gap-3, e o conteúdo respirando no CardContent.
Não
Equipe
Quem entra na clínica.
Conteúdo do card.
Card montado à mão: respiro de 12px, sombra pesada, sem data-slot (o foco em camadas não alcança) e sem as peças semânticas.