Xertica UI - Design System completo com componentes React e Tailwind CSS
npm install xertica-uiDesign System completo com componentes React e Tailwind CSS v4.0, construído com TypeScript seguindo arquitetura CLI-first (modelo Shadcn).
Para criar um novo projeto utilizando o Xertica UI:
``bash`
npx xertica-ui init meu-projeto
O CLI irá guiá-lo através da configuração:
1. Componentes: Escolha quais componentes incluir.
2. Páginas: Opte por incluir ou não Login, Home e Template.
3. Instalação: Dependências são instaladas automaticamente.
Após a inicialização:
`bash`
cd meu-projeto
npm run dev
Acesse: http://localhost:5173
Login padrão: Use qualquer email e senha.
- Node.js 18+ instalado
- npm, yarn ou pnpm
O método recomendado é usar o CLI:
`bash`
npx xertica-ui init meu-app
Para desenvolvimento do próprio pacote/biblioteca:
1. Clone o repositório:
`bash`
git clone [URL_DO_REPOSITORIO]
cd xertica-ui
2. Instale as dependências:
`bash`
npm install
``
xertica-ui/
├── components/
│ ├── ui/ # 156 componentes do Design System
│ │ ├── index.ts # Export central
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── alert.tsx
│ │ ├── map.tsx
│ │ ├── xertica-assistant.tsx
│ │ └── ... (todos os componentes)
│ │
│ ├── examples/ # Exemplos de uso (Maps)
│ ├── figma/ # Componentes Figma
│ ├── media/ # Players de áudio/vídeo
│ │
│ ├── HomePage.tsx # Página Home
│ ├── TemplatePage.tsx # Template completo
│ ├── LoginPage.tsx # Login
│ └── ... (componentes auxiliares)
│
├── contexts/ # Contextos React
│ ├── ThemeContext.tsx
│ ├── LanguageContext.tsx
│ └── ...
│
├── styles/
│ └── xertica/
│ ├── tokens.css # Design Tokens (Source of Truth)
│ ├── base.css # Base styles + Tailwind
│ ├── theme-map.css # Theme mapping
│ └── integrations/ # CSS overrides
│
├── App.tsx # Componente raiz
├── routes.tsx # Configuração de rotas
└── package.json # Dependências
- React 18.3 - Biblioteca JavaScript para interfaces
- TypeScript 5.7 - Superset tipado do JavaScript
- Tailwind CSS v4.0 - Framework CSS utility-first
- Vite 6.0 - Build tool e dev server ultrarrápido
- React Router 7 - Roteamento client-side
- Radix UI - Componentes acessíveis e não estilizados
- Shadcn/ui - Modelo CLI-first para componentes
- Lucide React - Ícones SVG
- Sonner - Toast notifications elegantes
- Recharts - Gráficos e visualizações de dados
- Google Generative AI - Integração com Gemini
`bash`
npm run dev
O projeto será aberto automaticamente em http://localhost:5173
`bash`
npm run build
`bash`
npm run preview
`bash`
npm run type-check
Todos os estilos são baseados em variáveis CSS definidas em /styles/xertica/tokens.css:
`css
/ Cores /
--primary: rgba(44, 39, 91, 1);
--background: rgba(255, 255, 255, 1);
--foreground: rgba(9, 9, 11, 1);
/ Tipografia /
--text-h1: 2rem;
--text-h2: 1.75rem;
--text-stats: 2.25rem;
--font-weight-medium: 500;
--font-weight-bold: 700;
/ Radius /
--radius: 6px;
--radius-button: 12px;
--radius-card: 12px;
/ Spacing /
--spacing-4: 1rem;
--spacing-8: 2rem;
`
Edite /styles/xertica/tokens.css e todo o sistema se adapta automaticamente:
`css`
:root {
--primary: rgba(255, 0, 0, 1); / Vermelho customizado /
--radius: 16px; / Bordas mais arredondadas /
}
- Fonte: Roboto (400, 500, 600, 700, 800)
- Tamanhos: Definidos via variáveis CSS (--text-*)
- Zero classes Tailwind de font-size ou font-weight hardcoded
Suporte completo a Dark Mode com toggle manual. A preferência é salva em localStorage.
Troca via atributo data-mode="dark" ou classe .dark
Sistema de autenticação simulada que aceita qualquer credencial não vazia:
- Email: qualquer@email.com
- Senha: qualquer senha
- /login - Página de login/forgot-password
- - Recuperação de senha/verify-email
- - Verificação de email/reset-password
- - Redefinição de senha/home
- - Página principal (protegida)/template
- - Template com todos os componentes (protegida)
O assistente Xertica usa Google Gemini AI. Configure a API Key:
1. Acesse o assistente AI
2. Clique em "Configurar API Key"
3. Insira sua chave da API do Google Gemini
4. A chave é salva localmente no navegador
Obter API Key: Google AI Studio
- ✅ Sistema de autenticação completo
- ✅ 156 componentes CLI-ready
- ✅ Design System baseado em variáveis CSS
- ✅ Dark mode completo
- ✅ Assistente AI integrado
- ✅ Sistema de notificações (toast)
- ✅ Design responsivo
- ✅ Arquitetura CLI-first (modelo Shadcn)
- ✅ TypeScript completo
- ✅ Zero CSS oculto
Totalmente responsivo com breakpoints:
- Mobile: 320px+
- Tablet: 768px+
- Desktop: 1024px+
- npm run dev - Inicia servidor de desenvolvimentonpm run build
- - Cria build de produçãonpm run preview
- - Preview da buildnpm run type-check
- - Verifica tipos TypeScriptnpm run lint
- - Executa linter
- Componentes: PascalCase (ex: LoginPage.tsx)utils.ts
- Utilitários: camelCase (ex: )ThemeContext.tsx
- Contextos: PascalCase com sufixo Context (ex: )
- CSS: Variáveis CSS em vez de classes Tailwind para tipografia
1. Verifique se todas as dependências estão instaladas:
`bash`
npm install
2. Limpe o cache do Vite:
`bash`
rm -rf node_modules/.vite
npm run dev
Execute a verificação de tipos:
`bash`
npm run type-check
Altere a porta em vite.config.ts:`ts``
server: {
port: 3001,
}
Este projeto é privado e proprietário.
Xertica AI Team
---
Nota: Este é um projeto de demonstração. Para uso em produção, implemente autenticação real, validação de segurança e testes adequados.