O que Conselheiro de Stack de UI faz?
Escolher a stack é a decisão de UI de maior alavancagem em um projeto: ela fixa a qualidade de acessibilidade, a flexibilidade de temas, o tamanho do bundle e o quão "modelado" o resultado parece. Faça a escolha deliberadamente, uma vez, e documente-a.
Snapshot de conhecimento: Novembro de 2026. Bibliotecas evoluem rápido — antes de instalar, confirme a versão principal atual e a API (consulte Verificação de atualização). Prefira o que já está no projeto a qualquer coisa listada aqui.
Etapa 1 — Leia o projeto primeiro
Verifique package.json / pubspec.yaml / Package.swift / build.gradle por libs de UI existentes, estilização (versão do Tailwind, CSS-in-JS), versão do framework e quaisquer components.json (shadcn), DESIGN.md, ou arquivos de tokens. Não introduza uma segunda biblioteca de componentes ao lado de uma existente — estenda a existente ou encapsule-a. Se o projeto já usa um concorrente de uma recomendação aqui, mencione-o, mas não troque dependências sem ser solicitado.
Etapa 2 — Responda a cinco perguntas
- Plataforma(s): somente web, somente mobile, ou ambas a partir de uma base de código?
- Propriedade: código copiado que você possui e pode reestilizar livremente (modelo shadcn) vs. uma dependência versionada com uma API de tema (modelo MUI/Mantine)? Copiado = máxima liberdade de design + você faz a manutenção. Dependência = mais rápido, consistente, atualizações gratuitas, mais difícil de se destacar.
- Tipo de produto: marketing/landing page (expressivo, com muito movimento), produto UI/dashboard (denso, consistente, amigável ao teclado), conteúdo (foco em tipografia), aplicativo mobile para consumidor (aparência nativa, gestos).
- Nível de acessibilidade: setor público / empresarial / UE (Lei Europeia de Acessibilidade) → escolha primitivas com acessibilidade comprovada (React Aria, Base UI, Radix) e não crie widgets interativos manualmente.
- Sistema de estilização: Tailwind v4 (padrão para novos projetos web), CSS Modules/vanilla-extract, ou CSS-in-JS; no RN: NativeWind vs Unistyles vs Tamagui.
Etapa 3 — Escolhas padrão (quando nada mais restringe)
| Situação | Padrão | Por quê |
|---|---|---|
| UI de produto React/Next.js | shadcn/ui (primitivas Base UI — o padrão desde julho de 2026; Radix e React Aria também são suportados) + Tailwind v4 | Você possui o código, ótima acessibilidade, ecossistema enorme de registries, ferramentas de IA o conhecem bem |
| React, widgets com acessibilidade crítica / complexos (intervalos de datas, comboboxes, drag & drop, i18n) | React Aria Components (ou a variante React Aria do shadcn / HeroUI v3, que é construída sobre ele) | Comportamento de acessibilidade + i18n mais rigoroso |
| React, completo, sem Tailwind | Mantine | 100+ componentes + hooks + formulários + datas, documentação robusta |
| React, visual empresarial/Material ou grades de dados pesadas | MUI v9 (+ MUI X Data Grid/Date Pickers/Charts) | Maduro, completo; mais difícil de se destacar |
| Admin empresarial (especialmente equipes CN/APAC) | Ant Design | Conjunto enorme de componentes, padrões densos em dados |
| Vue / Nuxt | Nuxt UI v4 (gratuito, construído sobre Reka UI + Tailwind v4) ou shadcn-vue | |
| Svelte / SvelteKit | shadcn-svelte (sobre Bits UI) | |
| Solid | Kobalte / solid-ui (port do shadcn) / Ark UI | |
| Angular | Spartan UI (semelhante ao shadcn) ou Angular Material / PrimeNG | |
| Primitivas agnósticas de framework | Ark UI (máquinas de estado Zag.js; React/Vue/Solid/Svelte) | |
| Estilo para marketing / landing page | shadcn + Motion + peças selecionadas de Magic UI / Aceternity / Animate UI / React Bits | Use 1–3 efeitos marcantes, não uma colagem |
| React Native / Expo (novo app) | Expo + Expo Router + NativeWind v5 + React Native Reusables (shadcn para RN) ou HeroUI Native; @expo/ui para controles verdadeiramente nativos SwiftUI/Compose; Reanimated 4 + Gesture Handler para movimento | |
| React Native, foco em desempenho estilo StyleSheet | Unistyles 3 + seus próprios componentes | |
| React Native + web a partir de uma base de código | Tamagui (compilador, universal) ou Expo + NativeWind com react-native-web | |
| Flutter | Material 3 (integrado) / Cupertino; forui ou shadcn_ui para uma aparência não-Material | |
| iOS nativo | Componentes de sistema SwiftUI (Liquid Glass no iOS 26+ vem de graça com controles padrão) | Resista o mínimo possível à plataforma |
| Android nativo | Jetpack Compose Material 3 (APIs Expressivas na linha material3 1.5) |
Detalhes, alternativas e trade-offs por plataforma estão nas referências — leia a que corresponde:
references/web-react.md— Primitivas React, kits estilizados, ecossistema shadcn e registries, ferramentas Tailwindreferences/web-other.md— Vue, Svelte, Solid, Angular, Astro, HTML simples / componentes webreferences/mobile.md— React Native/Expo, Flutter, SwiftUI, Compose, Kotlin Multiplatformreferences/motion.md— Bibliotecas de animação por plataforma e quando CSS/nativo é suficientereferences/building-blocks.md— Ícones, fontes, gráficos, tabelas, formulários, toasts, datas, DnD, virtualização, editores, menus de comando, carrosséis, mapas, 3Dreferences/inspiration.md— Onde procurar referências (Mobbin, Refero, etc.) e ferramentas de design com IA
Etapa 4 — Registre a decisão
Escreva a escolha no projeto (DESIGN.md ou seção "Stack de UI" do README): biblioteca + versão, abordagem de estilização, conjunto de ícones, biblioteca de movimento, fonte e por quê. Sessões futuras (e outros agentes) a lerão em vez de redecidir.
Verificação de atualização (faça isso antes de instalar)
npm view <pkg> version time.modified repository.url # versão atual + última publicação
npm view <pkg> deprecated # aviso de depreciação, se houver
# Flutter: https://pub.dev/packages/<pkg> (likes, pub points, última publicação)
# Swift: verifique a tag de versão mais recente do repositório
Sinais para evitar uma biblioteca: nenhum lançamento em 12+ meses com problemas críticos abertos, README diz "não mantido/arquivado", dependências pares fixadas em React/RN antigo, sem tipos TypeScript, problemas de acessibilidade ignorados. Exemplos conhecidos de aposentados/em risco: react-beautiful-dnd (depreciado → use @atlaskit/pragmatic-drag-and-drop ou dnd kit), @base-ui-components/react (renomeado → @base-ui/react), APIs Chakra v2 (v3 é uma reescrita em Ark UI/Panda), APIs de gesto Reanimated 2/3 (useAnimatedGestureHandler removido no v4).
Se MCPs de documentação estiverem disponíveis (ex.: Context7, shadcn MCP, o Figma MCP para consultas de design system), use-os para ler a documentação atual em vez de confiar na memória.
Anti-padrões
- Duas bibliotecas de componentes em um mesmo aplicativo (MUI + shadcn) → foco, espaçamento e temas inconsistentes.
- Criar manualmente diálogos, menus, comboboxes, date pickers, toasts, tooltips → bugs de acessibilidade (focus trap, escape, aria, scroll lock, colisão). Use primitivas.
- Instalar uma biblioteca de "componentes animados" por completo → copie apenas as 1–3 peças que você precisa.
- Usar um kit de UI web dentro do React Native via webviews, ou forçar componentes Material em usuários iOS.
- Deixar o tema padrão da biblioteca intacto → o problema de "todo app shadcn parece igual". Altere no mínimo: fonte, raio, cor de destaque, temperatura neutra e densidade (consulte as skills design-system-builder e color-theory).