Componentes
Blocos da interface — combinam tokens de cor, espaçamento, radius e movimento em peças reutilizáveis e acessíveis.
Ações & Navegação
Button
Ações primárias e secundárias
React/Vue: componente Sinapse
Link
Link de ação com seta indicadora
React/Vue: shadcn com tema Sinapse
Pagination
Navegação entre páginas
React/Vue: shadcn com tema Sinapse
Breadcrumb
Navegação hierárquica horizontal
React/Vue: shadcn com tema Sinapse
Tabs
Abas com troca de painéis
React/Vue: shadcn com tema Sinapse
Nav Icon
Ícone Tabler ou SVG de marca (Vue, Astro, React, Nuxt)
React/Vue: shadcn com tema Sinapse
Forms
Field
Agrupa rótulo, campo, texto de apoio e erro
React/Vue: shadcn com tema Sinapse
TextField
Campo de texto em pílula
React/Vue: shadcn com tema Sinapse
Search
Barra de busca em pílula, largura total
React/Vue: componente Sinapse
Select
Combobox com listbox personalizada
React/Vue: shadcn com tema Sinapse
Checkbox
Caixa quadrada multi-estado
React/Vue: shadcn com tema Sinapse
Switch
Alternador liga/desliga
React/Vue: shadcn com tema Sinapse
Feedback
Overlays
Data Display
Avatar
Pessoa, empresa ou sistema
React/Vue: shadcn com tema Sinapse
Tag
Selo de status somente leitura (4 tamanhos × 5 status)
React/Vue: componente Sinapse
Chip
Filtros, tags e indicadores compactos
React/Vue: shadcn com tema Sinapse
Data Overlay
Card de KPI com cabeçalho colorido e pin opcional
React/Vue: componente Sinapse
Risk Classification
KPI de risco com análise
React/Vue: shadcn com tema Sinapse
Feature Card
Card de chamada com título, descrição e ícone
React/Vue: shadcn com tema Sinapse