# 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

](/componentes/button)[

### Link

Link de ação com seta indicadora

React/Vue: shadcn com tema Sinapse

](/componentes/link)[

### Pagination

Navegação entre páginas

React/Vue: shadcn com tema Sinapse

](/componentes/pagination)[

### Breadcrumb

Navegação hierárquica horizontal

React/Vue: shadcn com tema Sinapse

](/componentes/breadcrumb)[

### Tabs

Abas com troca de painéis

React/Vue: shadcn com tema Sinapse

](/componentes/tabs)[

### Nav Icon

Ícone Tabler ou SVG de marca (Vue, Astro, React, Nuxt)

React/Vue: shadcn com tema Sinapse

](/componentes/nav-icon)

## Forms

[

### Field

Agrupa rótulo, campo, texto de apoio e erro

React/Vue: shadcn com tema Sinapse

](/componentes/field)[

### TextField

Campo de texto em pílula

React/Vue: shadcn com tema Sinapse

](/componentes/textfield)[

### Search

Barra de busca em pílula, largura total

React/Vue: componente Sinapse

](/componentes/search)[

### Select

Combobox com listbox personalizada

React/Vue: shadcn com tema Sinapse

](/componentes/select)[

### Checkbox

Caixa quadrada multi-estado

React/Vue: shadcn com tema Sinapse

](/componentes/checkbox)[

### Switch

Alternador liga/desliga

React/Vue: shadcn com tema Sinapse

](/componentes/switch)

## Feedback

[

### Banner

Barra de notificação em largura total, 4 status

React/Vue: shadcn com tema Sinapse

](/componentes/banner)[

### Toast

Notificação flutuante temporária

React/Vue: shadcn com tema Sinapse

](/componentes/toast)[

### Callout

Caixa de feedback contida, 3 tamanhos

React/Vue: shadcn com tema Sinapse

](/componentes/callout)

## Overlays

[

### Tooltip

Gatilho de ajuda com caixa flutuante

React/Vue: shadcn com tema Sinapse

](/componentes/tooltip)[

### Modal

Diálogo de 800px com cabeçalho, corpo e rodapé

React/Vue: shadcn com tema Sinapse

](/componentes/modal)[

### Side Panel

Painel lateral que desliza da direita

React/Vue: shadcn com tema Sinapse

](/componentes/side-panel)

## Data Display

[

### Avatar

Pessoa, empresa ou sistema

React/Vue: shadcn com tema Sinapse

](/componentes/avatar)[

### Tag

Selo de status somente leitura (4 tamanhos × 5 status)

React/Vue: componente Sinapse

](/componentes/tag)[

### Chip

Filtros, tags e indicadores compactos

React/Vue: shadcn com tema Sinapse

](/componentes/chip)[

### Data Overlay

Card de KPI com cabeçalho colorido e pin opcional

React/Vue: componente Sinapse

](/componentes/data-overlay)[

### Risk Classification

KPI de risco com análise

React/Vue: shadcn com tema Sinapse

](/componentes/risk-classification)[

### Feature Card

Card de chamada com título, descrição e ícone

React/Vue: shadcn com tema Sinapse

](/componentes/feature-card)

## Layout

[

### Card

Contêiner de conteúdo

React/Vue: shadcn com tema Sinapse

](/componentes/card)[

### Footer

Rodapé padrão dos produtos do ITpS

React/Vue: shadcn com tema Sinapse

](/componentes/footer)[

### Wavy Divider

Divisor ondulado decorativo entre seções

React/Vue: shadcn com tema Sinapse

](/componentes/wavy-divider)