@darksnow-ui/ui-kit

Um sistema de design moderno e flexível construído com Tailwind CSS.

🎨 O que oferecemos

1. Tailwind Preset

Configuração completa com cores, animações e utilitários customizados.

// tailwind.config.js
import preset from "@darksnow-ui/ui-kit/preset"

export default {
  presets: [preset],
  // suas customizações...
}

2. CSS Compilado

Classes prontas para projetos que não usam Tailwind.

/* main.css */
@import "@darksnow-ui/ui-kit/css";

Classes disponíveis:

• .btn-primary - Botão com gradiente
• .btn-secondary - Botão com transparência
• .card-3d - Card com efeito 3D
• .gradient-text - Texto gradiente
• Animações: .animate-blob, .animate-fade-in

3. Design Tokens (em breve)

Sistema de tokens para consistência visual.

import { tokens } from "@darksnow-ui/ui-kit/tokens"

// Usar em CSS-in-JS, Styled Components, etc
const primaryColor = tokens.colors.primary[500]

📦 Instalação

npm install @darksnow-ui/ui-kit

🚀 Quick Start

Com Tailwind CSS (Recomendado)

// tailwind.config.js
import uiKitPreset from "@darksnow-ui/ui-kit/preset"

export default {
  presets: [uiKitPreset],
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
}

// Componente React
export function Hero() {
  return (
    <div className="bg-gradient-to-br from-primary-500 to-secondary-500">
      <h1 className="gradient-text">Meu Título</h1>
      <button className="btn-primary">Começar</button>
    </div>
  )
}

Sem Tailwind CSS

/* styles.css */
@import "@darksnow-ui/ui-kit/css";

<button class="btn-primary">Botão Primário</button>
<div class="card-3d">
  <h2 class="gradient-text">Card 3D</h2>
</div>

🎯 Filosofia

1. Framework Agnostic - Use com React, Vue, Angular ou HTML puro
2. Progressivo - Adote gradualmente (CSS → Preset → Componentes)
3. Performático - Tree-shaking e CSS otimizado
4. Acessível - WCAG 2.1 AA por padrão
5. Customizável - Temas e variações fáceis

🗺️ Roadmap

• [x] Fase 1: CSS Foundation
• [ ] Fase 2: Design Tokens
• [ ] Fase 3: Componentes Headless
• [ ] Fase 4: Componentes React/Vue

📄 Licença

MIT