UI Components Integration

Guidelines completas para integração e uso dos componentes UI no projeto Vue 3 FSD. Os componentes são baseados em shadcn-vue e Reka UI.

Princípios Fundamentais

1. shadcn-vue First: Componentes estilizados prontos em src/shared/components/
2. Reka UI: Primitivos unstyled para comportamento e acessibilidade
3. Consistência Visual: Usar componentes do projeto garante consistência
4. Integração Tailwind: Componentes integrados com Tailwind CSS
5. Acessibilidade: Componentes baseados em Reka UI incluem acessibilidade (WAI-ARIA)

Quando Usar Esta Skill

• Criando novos componentes UI
• Implementando formulários
• Precisando de componentes de interface
• Customizando componentes existentes
• Integrando com VeeValidate
• Trabalhando com theming e dark mode

Stack Tecnológica

• shadcn-vue - Componentes estilizados prontos para uso
  • Docs: https://www.shadcn-vue.com/docs/components
  • Componentes copiados em src/shared/components/
• Reka UI - Componentes primitivos unstyled (base dos shadcn-vue)
  • Docs: https://reka-ui.com/
  • Usado internamente pelos componentes shadcn-vue
• Tailwind CSS 4.1.18 - Framework CSS utility-first
• VeeValidate - Integração com formulários

Setup e Configuração

Localização dos Componentes

Os componentes estão em src/shared/components/. Cada pasta contém um ou mais componentes com index.ts para exportação.

Importação de Componentes

// Importação de componentes UI do projeto
import { Button } from '@/shared/components/button'
import { Input } from '@/shared/components/input'
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/shared/components/form'

Componentes Disponíveis

Catálogo completo: components.md — lista de componentes, props e exemplos.

Recursos Disponíveis

• components.md - Catálogo completo de componentes disponíveis
• usage-patterns.md - Padrões de uso e integração
• customization.md - Customização e theming

Links de Referência

• shadcn-vue Components - Documentação oficial
• Reka UI - Componentes primitivos base
• Tailwind CSS Docs
• VeeValidate Docs

Quando Usar Componentes vs Criar Custom

✅ Usar Componentes do Projeto

• Componentes básicos de UI (Button, Input, etc)
• Componentes de formulário
• Componentes de layout (Dialog, etc)
• Quando precisa de consistência visual
• Quando precisa de acessibilidade built-in

⚠️ Criar Componente Custom

• Quando não existe o componente necessário
• Quando precisa de comportamento muito específico
• Quando criando widgets compostos (usar componentes internamente)

Padrão: Criar wrapper custom que usa componentes do projeto internamente.