Componentes

A biblioteca

Os primitivos moram em src/components/ui/* — shadcn/ui sobre Radix, editados pro canon. As demonstrações destas páginas importam os componentes de verdade: o que você vê aqui é literalmente o que a tela do app renderiza.

src/components/ui/*shadcn/ui + radix-uicva pras variantes

Por assunto

BotãoSete variantes, sete tamanhos, o crescimento no dedo e o botão de IA.Campos de formulárioInput, Textarea, Select, Busca, OTP, Checkbox, Label e o Field que costura tudo.CardA superfície padrão, o vivo ao toque, o card clicável e o cartão de resumo.Menus & seleçãoDropdownMenu pra agir e pra escolher — duas gramáticas na mesma peça, e por que não se trocam.Diálogos & confirmaçãoDialog, ConfirmDialog e a tarja de confirmação que substituiu o duplo clique.Status & selosStatusPill, os selos da jornada do paciente e as badges genéricas.Vazio, carregando & erroEmptyState, skeleton, erro de rota, alerta de formulário e toast.NavegaçãoSidebar, rail, barra de tela, abas e o retrato de conta.Edição no lugarCrudCard, Gaveta, EditSurface e a linha que vira ficha sem sair da tela.

Inventário

Tudo que existe hoje, com o arquivo. Se um componente não está aqui, ele não existe — e criar um novo é decisão de design system, não de tela.

Export	Arquivo	O que é
Button	ui/button.tsx	7 variantes · 7 tamanhos · cva
Input	ui/input.tsx	Campo de uma linha, pílula
Textarea	ui/textarea.tsx	Multi-linha, canto 16
SelectNative	ui/select-native.tsx	Select do navegador com a pele do Input
SearchInput	ui/search-input.tsx	Input + lupa decorativa
InputOTP	ui/input-otp.tsx	Código de verificação, 6 slots
Checkbox	ui/checkbox.tsx	Radix · a única forma de 6px do app
Label	ui/label.tsx	Radix · liga rótulo e controle
Field · SelectField · TextareaField	ui/field.tsx	Rótulo + controle + erro + dica, já costurados
FormAlert · FieldError · useFieldErrors	ui/form-feedback.tsx	Erro de formulário e de campo
PositiveBanner	ui/positive-banner.tsx	A contraparte calma do FormAlert
Card · CardHeader · CardTitle · CardDescription · CardContent	ui/card.tsx	A superfície padrão
Dialog	ui/dialog.tsx	Radix · modal do canon
ConfirmDialog	ui/confirm-dialog.tsx	Sim/não sobre o Dialog
ConfirmStrip · ConfirmTrigger · useConfirm	ui/confirm-strip.tsx	Confirmação destrutiva sem modal
DropdownMenu	ui/dropdown-menu.tsx	Radix · menu de AÇÃO
StatusPill	ui/status-pill.tsx	Selo de status — fonte visual única
EmptyState	ui/empty-state.tsx	Vazio padrão, moldura tracejada
SkeletonBlocos	ui/skeleton-blocos.tsx	Esqueleto das telas de rail
Toaster	ui/sonner.tsx	Sonner com os ícones e o raio do canon
AvatarBubble	ui/avatar-bubble.tsx	Retrato de conta, 32px
CardIconBadge	ui/card-icon-badge.tsx	Selo circular no topo de cards de fluxo
SettingsRow	ui/settings-row.tsx	Linha de configuração: texto à esquerda, ação à direita
RailLinks · RailGroups	ui/rail-nav.tsx	Miolo dos rails laterais
CrudCard · Gaveta · EditSurface · CrudRowShell …	ui/crud-block.tsx	Vocabulário da edição no lugar
PageBar · PageBody · PageStage	components/page-*.tsx	Os cabeçalhos e o corpo de uma tela

Como um componente entra

A pergunta não é “isso seria útil?”, e sim “o que já existe não resolve?”.

Primeiro, procure

Quase tudo já existe com outro nome. Escolher 1 entre N é SearchSelect; agir é DropdownMenu; confirmar destruição é ConfirmStrip; editar no lugar é CrudCard + Gaveta.

Depois, componha

Card + Field + Button resolvem a maioria das telas novas. Componente novo é o último recurso, não o primeiro.

Se entrar, entra em ui/

Com data-slot, className por cn(), props do elemento nativo repassadas e comentário dizendo QUAL regra do canon ele veste.

E entra nesta página

Componente sem página aqui é componente que vai divergir. A regra de manutenção é: mudou o canon, muda o guia no mesmo commit.

NotaA convenção data-slot

Todo primitivo carimba data-slot="button", data-slot="card" e afins. Não é enfeite: é o que permite uma regra global alcançar “todo card da tela” sem que nenhum card precise saber disso — é assim que o foco em camadas aplica a película sem tocar em um único componente.

Os primitivos aceitam className e passam adiante as props do elemento nativo. A classe do chamador entra por último no cn(), então ela vence — mas sobrepor a forma (trocar o raio, mudar a altura de um botão) é sinal de que a tela está fugindo do canon, não de que o componente falta uma prop.