zeentechUI

Sobre

zeentechUI é uma coleção de componentes reutilizáveis construída com React, TypeScript, Tailwind CSS e Radix UI. Projetado para ser:

• Customizável - Cada componente pode ser personalizado conforme sua necessidade
• Acessível - Construído com Radix UI para acessibilidade
• Copiável - Copie e cole os componentes diretamente no seu projeto
• Suporte a temas - Light, dark e contrast mode incluídos
• TypeScript - Totalmente tipado para melhor experiência de desenvolvimento

Instalação

zeentechUI oferece duas formas de uso para atender diferentes necessidades:

📦 Via CLI (Recomendado)

Copie apenas os componentes que você precisa diretamente para o seu projeto:

# 1. Inicialize a configuração (primeira vez - OBRIGATÓRIO)
npx @scmposs/zeentech-ui init

# 2. Adicione componentes específicos
npx @scmposs/zeentech-ui add button
npx @scmposs/zeentech-ui add card badge

# 3. Liste todos os componentes disponíveis
npx @scmposs/zeentech-ui list

O que o init faz?

• ✅ Cria o arquivo src/lib/utils.ts com funções utilitárias
• ✅ Verifica se o Tailwind CSS está configurado
• ✅ Prepara seu projeto para receber os componentes

Vantagens:

• ✅ Você tem controle total do código
• ✅ Pode customizar livremente
• ✅ Não aumenta o node_modules
• ✅ Melhor para tree-shaking
• ✅ Componentes ficam no seu projeto

📚 Via NPM (Pacote Completo)

Instale como dependência para acesso rápido a todos os componentes:

npm install @scmposs/zeentech-ui

yarn add @scmposs/zeentech-ui@latest

pnpm add @scmposs/zeentech-ui@latest

Vantagens:

• ✅ Instalação rápida
• ✅ Atualizações automáticas
• ✅ Ideal para protótipos
• ✅ Todos os componentes disponíveis

Uso

Importação básica (Via NPM)

Quando instalado como pacote npm:

import { Button, Card, Badge } from "@scmposs/zeentech-ui";
import "@scmposs/zeentech-ui/styles.css";

function App() {
  return (
    <Card>
      <h2>Olá zeentechUI!</h2>
      <p>Framework desenvolvido por Ítalo Soares Campos</p>
      <div>
        <Button>Clique aqui</Button>
        <Badge variant="secondary">v1.0.0</Badge>
      </div>
    </Card>
  );
}

Importação (Via CLI)

Quando adicionado via CLI, os componentes são copiados para o seu projeto:

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

function App() {
  return (
    <Card>
      <h2>Olá zeentechUI!</h2>
      <p>Framework desenvolvido por Ítalo Soares Campos</p>
      <div>
        <Button>Clique aqui</Button>
        <Badge variant="secondary">v1.1.0</Badge>
      </div>
    </Card>
  );
}

Configuração de estilos (NPM)

Ao usar via NPM, importe os estilos CSS no seu projeto:

import "@scmposs/zeentech-ui/styles.css";

Configuração de estilos (CLI)

Ao usar via CLI, os estilos já estão integrados com seu Tailwind CSS existente. Não é necessário importar CSS adicional.

Configuração do Tailwind

Adicione o zeentechUI ao seu tailwind.config.js:

module.exports = {
  content: [
    // ... seu conteúdo existente
    "./node_modules/@scmposs/zeentech-ui/**/*.{js,ts,jsx,tsx}",
  ],
  // ... resto da configuração
};

Componentes

Componentes de Interface

• Button - Botões com múltiplas variantes e tamanhos
• Card - Containers flexíveis para conteúdo
• Badge - Rótulos e tags para categorização
• Input - Campos de entrada estilizados
• Label - Rótulos para formulários
• Textarea - Campos de texto multilinha

Componentes Interativos

• Dialog - Modais e overlays
• Select - Seletores dropdown
• Checkbox - Caixas de seleção
• Switch - Controles de alternância
• Accordion - Listas colapsáveis
• Popover - Tooltips e popups

Componentes de Layout

• Separator - Divisores visuais
• Scroll Area - Áreas de rolagem customizadas
• Table - Tabelas responsivas

Componentes de Feedback

• Toast - Notificações temporárias
• Skeleton - Loading placeholders

Documentação

Cada componente vem com documentação completa incluindo:

• Exemplos visuais - Veja os componentes em ação
• Código copiável - Copie e cole diretamente no seu projeto
• Props API - Documentação completa de todas as propriedades
• Variações - Diferentes estilos e configurações
• Casos de uso - Exemplos práticos de implementação

Exemplos de componentes

Button

// Variantes básicas
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Tamanhos
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🎉</Button>

Card

<Card>
  <CardHeader>
    <CardTitle>Título do Card</CardTitle>
    <CardDescription>Descrição opcional</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Conteúdo do card aqui</p>
  </CardContent>
  <CardFooter>
    <Button>Ação</Button>
  </CardFooter>
</Card>

Sistema de Cores

O zeentechUI utiliza um sistema de cores customizado baseado na identidade visual da zeentech:

• Primary: #9a1c1f - Vermelho característico da marca
• Accent: #d00b12 - Vermelho mais vibrante para destaques
• Muted: Tons de cinza para textos secundários
• Destructive: Vermelho para ações destrutivas
• Success: Verde para confirmações

Suporte a temas

• Light Mode - Tema claro padrão
• Dark Mode - Tema escuro elegante
• Contrast Mode - Alto contraste para acessibilidade

Desenvolvimento

Estrutura do projeto

zeentech-ui-italo/
├── src/
│   ├── app/                 # Next.js app router
│   ├── registry/
│   │   └── ui/             # Componentes UI
│   ├── lib/
│   │   └── utils.ts        # Utilitários
│   └── styles/
│       └── globals.css     # Estilos globais
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

Scripts disponíveis

# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Lint
npm run lint

# Build dos componentes para NPM
npm run build:package

Autor

Ítalo Soares Campos
Desenvolvedor Front-end
Equipe zeentech IDT

zeentech-IDT

Este framework foi desenvolvido como parte do Go Be de Ítalo Soares Campos - zeentech-IDT (Itelligence Data Team), focado em criar soluções tecnológicas modernas e acessíveis.

Licença

MIT License - veja o arquivo LICENSE para detalhes.