purvex-ui 0.1.0

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "purvex-ui",
+  "version": "0.1.0",
+  "description": "React component generator with Tailwind CSS v4 & Purple Elegant theme - Built by Al Zaki Ibra Ramadani",
+  "main": "src/index.js",
+  "bin": {
+    "purvex-ui": "src/index.js"
+  },
+  "files": [
+    "src/",
+    "templates/",
+    "registry/"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepare": "node -e \"require('fs').chmodSync('src/index.js', '755')\""
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwindcss",
+    "vite",
+    "cli",
+    "generator",
+    "purple",
+    "theme"
+  ],
+  "author": "Al Zaki Ibra Ramadani",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VortechLabs/purvex-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/VortechLabs/purvex-ui/issues"
+  },
+  "homepage": "https://purvex-ui.vercel.app",
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/src/commands/add.js

@@ -0,0 +1,80 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+async function addComponent(componentName, options) {
+  try {
+    console.log(chalk.blue.bold(`\n🔄 Adding ${componentName}...\n`));
+    
+    // 1. Load registry
+    const cliDir = path.dirname(path.dirname(__dirname));
+    const rootDir = path.dirname(path.dirname(cliDir));
+    const registryPath = path.join(rootDir, 'registry', 'components.json');
+    
+    if (!fs.existsSync(registryPath)) {
+      console.log(chalk.red('❌ Registry not found'));
+      return;
+    }
+    
+    const registryContent = fs.readFileSync(registryPath, 'utf-8');
+    const registry = JSON.parse(registryContent);
+    
+    // 2. Find component
+    const component = registry.components.find(c => c.name === componentName);
+    
+    if (!component) {
+      console.log(chalk.red(`❌ Component "${componentName}" not found`));
+      console.log(chalk.yellow('\nAvailable components:'));
+      registry.components.forEach(c => {
+        console.log(chalk.cyan(`  - ${c.name}`));
+      });
+      return;
+    }
+    
+    // 3. Setup target directory INSIDE src
+    const userProjectRoot = process.cwd();
+    const targetDir = path.join(userProjectRoot, 'src', 'components', 'ui');
+    
+    // Auto create directory jika belum ada
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+    }
+    
+    // 4. Copy template files
+    for (const file of component.files) {
+      const sourcePath = path.join(rootDir, 'templates', file);
+      const targetPath = path.join(targetDir, path.basename(file));
+      
+      if (!fs.existsSync(sourcePath)) {
+        console.log(chalk.yellow(`⚠️  Template ${file} not found, skipping...`));
+        continue;
+      }
+      
+      // Read template
+      let content = fs.readFileSync(sourcePath, 'utf-8');
+      
+      // Update import path untuk src/
+      content = content.replace(/@\/lib\/utils/g, '@/lib/utils');
+      content = content.replace(/@\/components\/ui/g, '@/components/ui');
+      
+      // Write to target
+      fs.writeFileSync(targetPath, content);
+      
+      const relativePath = path.relative(userProjectRoot, targetPath);
+      console.log(chalk.green('✅ Created: ') + relativePath);
+    }
+    
+    // 5. Success message
+    console.log(chalk.green.bold(`\n🎉 Component ${componentName} added successfully!`));
+    console.log(chalk.white('\nUsage:'));
+    console.log(chalk.cyan(`  import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from "@/components/ui/${componentName}";`));
+    
+    console.log(chalk.white('\nStart your dev server:'));
+    console.log(chalk.cyan('  npm run dev'));
+    
+  } catch (error) {
+    console.error(chalk.red('❌ Error adding component:'), error.message);
+  }
+}
+
+module.exports = { addComponent };

package/src/commands/init.js

@@ -0,0 +1,147 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const { execSync } = require('child_process');
+
+async function initProject() {
+  try {
+    const userProjectRoot = process.cwd();
+    
+    console.log(chalk.blue.bold('🚀 Initializing Purvex UI...\n'));
+    
+    // 1. Check package.json
+    const packageJsonPath = path.join(userProjectRoot, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+      console.log(chalk.red('❌ Tidak ada package.json ditemukan'));
+      console.log(chalk.yellow('   Buat project React dulu: npx create-vite@latest . --template react'));
+      return;
+    }
+    
+    // 2. Auto install dependencies jika belum ada
+    console.log(chalk.blue('📦 Checking dependencies...'));
+    
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    const deps = packageJson.dependencies || {};
+    const devDeps = packageJson.devDependencies || {};
+    
+    const missingDeps = [];
+    
+    if (!deps['clsx']) missingDeps.push('clsx');
+    if (!deps['tailwind-merge']) missingDeps.push('tailwind-merge');
+    
+    if (missingDeps.length > 0) {
+      console.log(chalk.yellow(`⚠️  Installing missing dependencies: ${missingDeps.join(', ')}`));
+      try {
+        execSync(`npm install ${missingDeps.join(' ')}`, { stdio: 'inherit' });
+        console.log(chalk.green('✅ Dependencies installed'));
+      } catch (error) {
+        console.log(chalk.yellow('⚠️  Install dependencies manually:'));
+        console.log(chalk.cyan(`   npm install ${missingDeps.join(' ')}`));
+      }
+    } else {
+      console.log(chalk.green('✅ All dependencies already installed'));
+    }
+    
+    // 3. Check Tailwind CSS
+    const tailwindConfigs = [
+      'tailwind.config.js',
+      'tailwind.config.ts',
+      'tailwind.config.cjs',
+      'tailwind.config.mjs'
+    ];
+    
+    const hasTailwindConfig = tailwindConfigs.some(config => 
+      fs.existsSync(path.join(userProjectRoot, config))
+    );
+    
+    if (!hasTailwindConfig) {
+      console.log(chalk.yellow('\n⚠️  Tailwind CSS not found!'));
+      console.log(chalk.cyan('   Installing Tailwind CSS...'));
+      try {
+        execSync('npm install -D tailwindcss postcss autoprefixer', { stdio: 'inherit' });
+        execSync('npx tailwindcss init -p', { stdio: 'inherit' });
+        console.log(chalk.green('✅ Tailwind CSS installed'));
+      } catch (error) {
+        console.log(chalk.yellow('⚠️  Install Tailwind CSS manually:'));
+        console.log(chalk.cyan('   1. npm install -D tailwindcss postcss autoprefixer'));
+        console.log(chalk.cyan('   2. npx tailwindcss init -p'));
+      }
+    } else {
+      console.log(chalk.green('✅ Tailwind CSS already installed'));
+    }
+    
+    // 4. Update Tailwind config untuk include components
+    const tailwindConfigPath = tailwindConfigs.find(config => 
+      fs.existsSync(path.join(userProjectRoot, config))
+    );
+    
+    if (tailwindConfigPath) {
+      try {
+        const configContent = fs.readFileSync(path.join(userProjectRoot, tailwindConfigPath), 'utf-8');
+        if (!configContent.includes('./components')) {
+          console.log(chalk.blue('⚙️  Updating Tailwind config...'));
+          const updatedContent = configContent.replace(
+            /content:\s*\[([\s\S]*?)\]/,
+            `content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}'
+  ]`
+          );
+          fs.writeFileSync(path.join(userProjectRoot, tailwindConfigPath), updatedContent);
+          console.log(chalk.green('✅ Tailwind config updated'));
+        }
+      } catch (error) {
+        // Skip jika error
+      }
+    }
+    
+    // 5. Create directories INSIDE src
+    const srcDir = path.join(userProjectRoot, 'src');
+    const libDir = path.join(srcDir, 'lib');
+    const componentsDir = path.join(srcDir, 'components', 'ui');
+    
+    // Create src jika belum ada (untuk project yang tidak punya src)
+    if (!fs.existsSync(srcDir)) {
+      fs.mkdirSync(srcDir, { recursive: true });
+    }
+    
+    // Create lib/utils.js inside src
+    if (!fs.existsSync(libDir)) {
+      fs.mkdirSync(libDir, { recursive: true });
+    }
+    
+    const utilsPath = path.join(libDir, 'utils.js');
+    if (!fs.existsSync(utilsPath)) {
+      const utilsTemplate = `import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}`;
+      
+      fs.writeFileSync(utilsPath, utilsTemplate);
+      console.log(chalk.green('✅ Created: src/lib/utils.js'));
+    }
+    
+    // Create components directory inside src
+    if (!fs.existsSync(componentsDir)) {
+      fs.mkdirSync(componentsDir, { recursive: true });
+      console.log(chalk.green('✅ Created: src/components/ui directory'));
+    }
+    
+    // 6. Success message
+    console.log(chalk.green.bold('\n🎉 Purvex UI initialized successfully!'));
+    console.log(chalk.white('\nTo add components:'));
+    console.log(chalk.cyan('  npx purvex-ui add button'));
+    console.log(chalk.cyan('  npx purvex-ui add card'));
+    
+    console.log(chalk.white('\nStart using:'));
+    console.log(chalk.gray('  import { Button } from "@/components/ui/button"'));
+    
+  } catch (error) {
+    console.error(chalk.red('❌ Error during init:'), error.message);
+  }
+}
+
+module.exports = { initProject };

package/src/commands/install.js

@@ -0,0 +1,30 @@
+const { execSync } = require('child_process');
+const chalk = require('chalk');
+
+async function installDeps() {
+  try {
+    console.log(chalk.blue.bold('📦 Installing Purvex UI dependencies...\n'));
+    
+    // Install clsx dan tailwind-merge
+    console.log(chalk.blue('Installing clsx and tailwind-merge...'));
+    execSync('npm install clsx tailwind-merge', { stdio: 'inherit' });
+    
+    // Install Tailwind CSS
+    console.log(chalk.blue('\nInstalling Tailwind CSS...'));
+    execSync('npm install -D tailwindcss postcss autoprefixer', { stdio: 'inherit' });
+    execSync('npx tailwindcss init -p', { stdio: 'inherit' });
+    
+    console.log(chalk.green.bold('\n✅ All dependencies installed!'));
+    console.log(chalk.white('\nNext:'));
+    console.log(chalk.cyan('  npx purvex-ui init'));
+    
+  } catch (error) {
+    console.error(chalk.red('❌ Error installing dependencies:'), error.message);
+    console.log(chalk.yellow('\nInstall manually:'));
+    console.log(chalk.cyan('  npm install clsx tailwind-merge'));
+    console.log(chalk.cyan('  npm install -D tailwindcss postcss autoprefixer'));
+    console.log(chalk.cyan('  npx tailwindcss init -p'));
+  }
+}
+
+module.exports = { installDeps };

package/src/commands/setup.js

@@ -0,0 +1,482 @@
+const chalk = require('chalk');
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+async function setupProject() {
+  try {
+    console.log(chalk.green.bold('🚀 Setting up Purvex UI project with Tailwind v4...\n'));
+    
+    const userProjectRoot = process.cwd();
+    
+    // 1. Check jika React project
+    const packageJsonPath = path.join(userProjectRoot, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+      console.log(chalk.red('❌ Not a React project'));
+      console.log(chalk.yellow('Create React project first:'));
+      console.log(chalk.cyan('  npx create-vite@latest . --template react'));
+      return;
+    }
+    
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    
+    // 2. Install dependencies (Tailwind v4 TERBARU)
+    console.log(chalk.blue('📦 Installing Purvex UI dependencies (Tailwind v4)...'));
+    
+    try {
+      // Install clsx dan tailwind-merge
+      execSync('npm install clsx tailwind-merge', { stdio: 'inherit' });
+      
+      // Install Tailwind v4 (VERSI TERBARU)
+      execSync('npm install -D tailwindcss@latest @tailwindcss/vite', { stdio: 'inherit' });
+      
+      console.log(chalk.green('✅ Dependencies installed'));
+    } catch (error) {
+      console.log(chalk.yellow('⚠️  Install manually:'));
+      console.log(chalk.cyan('  npm install clsx tailwind-merge'));
+      console.log(chalk.cyan('  npm install -D tailwindcss@latest @tailwindcss/vite'));
+    }
+    
+    // 3. Setup untuk Tailwind v4 - TIDAK PERLU tailwind.config.js lagi
+    console.log(chalk.blue('⚙️  Setting up Tailwind CSS v4...'));
+    
+    const tailwindConfigPath = path.join(userProjectRoot, 'tailwind.config.js');
+    const postcssConfigPath = path.join(userProjectRoot, 'postcss.config.js');
+    
+    // Hapus file config lama jika ada
+    if (fs.existsSync(tailwindConfigPath)) {
+      fs.unlinkSync(tailwindConfigPath);
+      console.log(chalk.yellow('🗑️  Removed old tailwind.config.js (not needed for v4)'));
+    }
+    
+    if (fs.existsSync(postcssConfigPath)) {
+      fs.unlinkSync(postcssConfigPath);
+      console.log(chalk.yellow('🗑️  Removed old postcss.config.js (not needed for v4)'));
+    }
+    
+    // 4. Update Vite config untuk Tailwind v4
+    console.log(chalk.blue('🔧 Configuring Vite for Tailwind v4...'));
+    
+    const viteConfigs = ['vite.config.js', 'vite.config.ts'];
+    let viteConfigFile = null;
+    let isTypeScript = false;
+    
+    for (const config of viteConfigs) {
+      if (fs.existsSync(path.join(userProjectRoot, config))) {
+        viteConfigFile = config;
+        isTypeScript = config.endsWith('.ts');
+        break;
+      }
+    }
+    
+    // Import untuk TypeScript atau JavaScript
+    const importStatement = isTypeScript ? 
+      `import tailwindcss from '@tailwindcss/vite'` :
+      `import tailwindcss from '@tailwindcss/vite'`;
+    
+    if (!viteConfigFile) {
+      // Buat vite.config.js baru untuk Tailwind v4
+      viteConfigFile = 'vite.config.js';
+      const viteConfigContent = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})`;
+      
+      fs.writeFileSync(path.join(userProjectRoot, viteConfigFile), viteConfigContent);
+      console.log(chalk.green(`✅ Created: ${viteConfigFile} with Tailwind v4`));
+    } else {
+      // Update existing vite config untuk Tailwind v4
+      const configPath = path.join(userProjectRoot, viteConfigFile);
+      let configContent = fs.readFileSync(configPath, 'utf-8');
+      
+      // Tambah import @tailwindcss/vite
+      if (!configContent.includes("@tailwindcss/vite")) {
+        configContent = importStatement + '\n' + configContent;
+      }
+      
+      // Tambahkan tailwindcss() ke plugins
+      if (configContent.includes('plugins:')) {
+        if (configContent.includes('tailwindcss(),')) {
+          console.log(chalk.green('✅ Tailwind v4 already configured in Vite'));
+        } else {
+          // Tambahkan ke array plugins
+          configContent = configContent.replace(
+            /plugins:\s*\[([\s\S]*?)\]/,
+            `plugins: [
+    $1\n    tailwindcss(),`
+          );
+          // Tutup bracket dengan benar
+          configContent = configContent.replace(/tailwindcss\(\),\s*$/, 'tailwindcss(),\n  ]');
+        }
+      } else {
+        // Tambah section plugins baru
+        configContent = configContent.replace(
+          /export default defineConfig\({([\s\S]*?)}\)/,
+          `export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],$1})`
+        );
+      }
+      
+      // Add path alias jika belum ada
+      if (!configContent.includes("'@': path.resolve")) {
+        // Add path import jika belum ada
+        if (!configContent.includes("import path from 'path'")) {
+          configContent = configContent.replace(
+            /import.*from.*['"]@vitejs\/plugin-react['"]/,
+            `import path from 'path'\n$&`
+          );
+        }
+        
+        // Add alias configuration
+        if (configContent.includes('resolve:')) {
+          // Update existing resolve
+          configContent = configContent.replace(
+            /resolve:\s*{([\s\S]*?)}/,
+            `resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },$1}`
+          );
+        } else {
+          // Add new resolve section
+          configContent = configContent.replace(
+            /export default defineConfig\({([\s\S]*?)}\)/,
+            `export default defineConfig({
+  $1
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})`
+          );
+        }
+      }
+      
+      fs.writeFileSync(configPath, configContent);
+      console.log(chalk.green(`✅ Updated: ${viteConfigFile} for Tailwind v4`));
+    }
+    
+    // 5. Setup CSS file dengan Tailwind v4 syntax
+    console.log(chalk.blue('🎨 Setting up CSS with Tailwind v4...'));
+    
+    const srcDir = path.join(userProjectRoot, 'src');
+    const indexPath = path.join(srcDir, 'index.css');
+    
+    // CSS untuk Tailwind v4 - Menggunakan @import bukan @tailwind
+    const cssContent = `/* Purvex UI - Tailwind v4 */
+@import 'tailwindcss';
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+* {
+  font-family: "Montserrat", sans-serif;
+}
+
+/* CSS Variables untuk Purple Elegant Theme */
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+  
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+  
+  /* PRIMARY - UNGU ELEGANT #7C3AED */
+  --color-primary: hsl(262.1 83.3% 57.8%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(262.1 83.3% 57.8%);
+  
+  --radius: 0.5rem;
+  
+  /* Dark Mode Variables */
+  --color-dark-background: hsl(222.2 84% 4.9%);
+  --color-dark-foreground: hsl(210 40% 98%);
+  
+  --color-dark-card: hsl(222.2 84% 4.9%);
+  --color-dark-card-foreground: hsl(210 40% 98%);
+  
+  --color-dark-popover: hsl(222.2 84% 4.9%);
+  --color-dark-popover-foreground: hsl(210 40% 98%);
+  
+  --color-dark-primary: hsl(263.4 70% 50.4%);
+  --color-dark-primary-foreground: hsl(210 40% 98%);
+  
+  --color-dark-secondary: hsl(217.2 32.6% 17.5%);
+  --color-dark-secondary-foreground: hsl(210 40% 98%);
+  
+  --color-dark-muted: hsl(217.2 32.6% 17.5%);
+  --color-dark-muted-foreground: hsl(215 20.2% 65.1%);
+  
+  --color-dark-accent: hsl(217.2 32.6% 17.5%);
+  --color-dark-accent-foreground: hsl(210 40% 98%);
+  
+  --color-dark-destructive: hsl(0 62.8% 30.6%);
+  --color-dark-destructive-foreground: hsl(210 40% 98%);
+  
+  --color-dark-border: hsl(217.2 32.6% 17.5%);
+  --color-dark-input: hsl(217.2 32.6% 17.5%);
+  --color-dark-ring: hsl(263.4 70% 50.4%);
+}
+
+/* Custom Utility Classes */
+@layer utilities {
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  
+  .text-foreground {
+    color: var(--color-foreground);
+  }
+  
+  .border {
+    border-color: var(--color-border);
+  }
+  
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  
+  .text-primary-foreground {
+    color: var(--color-primary-foreground);
+  }
+  
+  /* Dark Mode Classes */
+  .dark .bg-background {
+    background-color: var(--color-dark-background);
+  }
+  
+  .dark .text-foreground {
+    color: var(--color-dark-foreground);
+  }
+  
+  .dark .border {
+    border-color: var(--color-dark-border);
+  }
+  
+  .dark .bg-primary {
+    background-color: var(--color-dark-primary);
+  }
+  
+  .dark .text-primary-foreground {
+    color: var(--color-dark-primary-foreground);
+  }
+  
+  /* Gradient Utilities */
+  .bg-gradient-purple {
+    background: linear-gradient(to right, #7c3aed, #6d28d9, #5b21b6);
+  }
+  
+  .bg-gradient-purple-dark {
+    background: linear-gradient(to right, #1f2937, #6b21a8, #1f2937);
+  }
+  
+  /* Border Radius Utilities */
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
+  
+  .rounded-md {
+    border-radius: calc(var(--radius) - 2px);
+  }
+  
+  .rounded-sm {
+    border-radius: calc(var(--radius) - 4px);
+  }
+}
+
+/* Base Styles */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+  
+  /* Dark Mode */
+  .dark * {
+    border-color: var(--color-dark-border);
+  }
+  
+  .dark body {
+    background-color: var(--color-dark-background);
+    color: var(--color-dark-foreground);
+  }
+}`;
+    
+    if (fs.existsSync(indexPath)) {
+      fs.writeFileSync(indexPath, cssContent);
+      console.log(chalk.green('✅ Updated: src/index.css for Tailwind v4'));
+    } else {
+      if (!fs.existsSync(srcDir)) {
+        fs.mkdirSync(srcDir, { recursive: true });
+      }
+      fs.writeFileSync(indexPath, cssContent);
+      console.log(chalk.green('✅ Created: src/index.css for Tailwind v4'));
+    }
+    
+    // 6. Create Purvex UI directories
+    const libDir = path.join(srcDir, 'lib');
+    const componentsDir = path.join(srcDir, 'components', 'ui');
+    
+    if (!fs.existsSync(libDir)) {
+      fs.mkdirSync(libDir, { recursive: true });
+    }
+    
+    if (!fs.existsSync(componentsDir)) {
+      fs.mkdirSync(componentsDir, { recursive: true });
+    }
+    
+    // 7. Create utils.js
+    const utilsPath = path.join(libDir, 'utils.js');
+    const utilsTemplate = `import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}`;
+    
+    fs.writeFileSync(utilsPath, utilsTemplate);
+    console.log(chalk.green('✅ Created: src/lib/utils.js'));
+    
+    // 8. Buat tailwind.config.js sederhana jika diperlukan
+    // (Optional untuk advanced configuration)
+    const simpleTailwindConfig = `/** 
+ * Tailwind v4 Configuration
+ * Note: Most configuration is now done via CSS @theme directive
+ */
+
+export default {
+  // Content configuration
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  
+  // Optional plugins
+  plugins: [],
+}`;
+    
+    fs.writeFileSync(path.join(userProjectRoot, 'tailwind.config.js'), simpleTailwindConfig);
+    console.log(chalk.yellow('📝 Created optional tailwind.config.js (minimal)'));
+    
+    // 9. Install @types/node untuk TypeScript support
+    if (fs.existsSync(path.join(userProjectRoot, 'tsconfig.json'))) {
+      try {
+        execSync('npm install -D @types/node', { stdio: 'inherit' });
+        console.log(chalk.green('✅ Installed @types/node for TypeScript'));
+      } catch (error) {
+        // Skip jika error
+      }
+    }
+    
+    // 10. Update package.json scripts jika perlu
+    try {
+      const pkgJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+      
+      if (!pkgJson.scripts || !pkgJson.scripts.dev) {
+        pkgJson.scripts = {
+          ...pkgJson.scripts,
+          dev: 'vite',
+          build: 'vite build',
+          preview: 'vite preview'
+        };
+        
+        fs.writeFileSync(packageJsonPath, JSON.stringify(pkgJson, null, 2));
+        console.log(chalk.green('✅ Updated package.json scripts'));
+      }
+    } catch (error) {
+      // Ignore error
+    }
+    
+    // 11. Success message
+    console.log(chalk.green.bold('\n🎉 Purvex UI setup complete with Tailwind v4!'));
+    console.log(chalk.white('\n✅ Everything installed automatically:'));
+    console.log(chalk.gray('  • Tailwind CSS v4 (LATEST)'));
+    console.log(chalk.gray('  • @tailwindcss/vite plugin'));
+    console.log(chalk.gray('  • clsx & tailwind-merge'));
+    console.log(chalk.gray('  • Path alias (@/ → src/)'));
+    console.log(chalk.gray('  • Purple Elegant color theme (#7C3AED)'));
+    console.log(chalk.gray('  • CSS variables system in CSS file'));
+    
+    console.log(chalk.white('\n🎯 Next steps:'));
+    console.log(chalk.cyan('  1. npx purvex-ui add button'));
+    console.log(chalk.cyan('  2. npx purvex-ui add card'));
+    
+    console.log(chalk.white('\n🚀 Start development server:'));
+    console.log(chalk.cyan('  npm run dev'));
+    
+    console.log(chalk.white('\n📁 Project structure created:'));
+    console.log(chalk.gray('  src/components/ui/      ← Your components'));
+    console.log(chalk.gray('  src/lib/utils.js       ← cn() utility'));
+    console.log(chalk.gray('  vite.config.js         ← Tailwind v4 plugin configured'));
+    console.log(chalk.gray('  src/index.css          ← Theme & Tailwind v4 imports'));
+    
+    console.log(chalk.white('\n🎨 Theme: Purple Elegant'));
+    console.log(chalk.gray('  Primary: #7C3AED (Elegant Purple)'));
+    console.log(chalk.gray('  Dark mode: Black + Purple'));
+    console.log(chalk.gray('  Includes gradient utilities'));
+    
+    console.log(chalk.white('\n⚡ Tailwind v4 Features:'));
+    console.log(chalk.gray('  • CSS-first configuration'));
+    console.log(chalk.gray('  • No PostCSS needed'));
+    console.log(chalk.gray('  • Faster build times'));
+    console.log(chalk.gray('  • @theme directive in CSS'));
+    
+    console.log(chalk.white('\n💡 Tip: Add more components with:'));
+    console.log(chalk.cyan('  npx purvex-ui add [component-name]'));
+    
+    console.log(chalk.yellow('\n⚠️  Important: Tailwind v4 uses different syntax!'));
+    console.log(chalk.gray('  - Use @import "tailwindcss" not @tailwind directives'));
+    console.log(chalk.gray('  - Configure theme in CSS with @theme directive'));
+    console.log(chalk.gray('  - No tailwind.config.js needed (minimal version created)'));
+    
+  } catch (error) {
+    console.error(chalk.red('❌ Setup error:'), error.message);
+    console.log(chalk.yellow('\n💡 Manual setup steps for Tailwind v4:'));
+    console.log(chalk.cyan('  1. npm install clsx tailwind-merge'));
+    console.log(chalk.cyan('  2. npm install -D tailwindcss@latest @tailwindcss/vite'));
+    console.log(chalk.cyan('  3. Add tailwindcss() to vite.config.js plugins'));
+    console.log(chalk.cyan('  4. Add @import "tailwindcss" to CSS file'));
+    console.log(chalk.cyan('  5. Add @theme directive for custom colors'));
+    console.log(chalk.cyan('  6. Add path alias to vite.config.js'));
+  }
+}
+
+module.exports = { setupProject };

package/src/commands/uninstall.js

@@ -0,0 +1,130 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const { execSync } = require('child_process');
+
+async function uninstallProject() {
+  try {
+    console.log(chalk.red.bold('🗑️  Uninstalling Purvex UI...\n'));
+    
+    const userProjectRoot = process.cwd();
+    
+    // 1. Confirm
+    const readline = require('readline').createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    
+    const answer = await new Promise((resolve) => {
+      readline.question(
+        chalk.yellow('❓ Remove Purvex UI files and dependencies? (y/N): '),
+        resolve
+      );
+    });
+    
+    readline.close();
+    
+    if (answer.toLowerCase() !== 'y') {
+      console.log(chalk.gray('Uninstall cancelled'));
+      return;
+    }
+    
+    console.log(chalk.blue('📁 Removing Purvex UI files...'));
+    
+    // 2. Hapus file/folder
+    const filesToRemove = [
+      'src/components/ui',
+      'src/lib'
+    ];
+    
+    filesToRemove.forEach(file => {
+      const filePath = path.join(userProjectRoot, file);
+      if (fs.existsSync(filePath)) {
+        fs.rmSync(filePath, { recursive: true, force: true });
+        console.log(chalk.green(`✅ Removed: ${file}`));
+      }
+    });
+    
+    // 3. Uninstall dependencies
+    console.log(chalk.blue('\n📦 Removing dependencies...'));
+    
+    try {
+      // Uninstall regular deps
+      execSync('npm uninstall clsx tailwind-merge', { stdio: 'inherit' });
+      
+      // Uninstall dev deps
+      const devDeps = ['tailwindcss', 'postcss', 'autoprefixer', '@tailwindcss/vite'];
+      devDeps.forEach(dep => {
+        try {
+          execSync(`npm uninstall -D ${dep}`, { stdio: 'pipe' });
+        } catch (e) {
+          // Skip jika dep tidak ada
+        }
+      });
+      
+      console.log(chalk.green('✅ Dependencies removed'));
+    } catch (error) {
+      console.log(chalk.yellow('⚠️  Remove dependencies manually:'));
+      console.log(chalk.cyan('   npm uninstall clsx tailwind-merge'));
+      console.log(chalk.cyan('   npm uninstall -D tailwindcss postcss autoprefixer @tailwindcss/vite'));
+    }
+    
+    // 4. Optional: Remove config files
+    console.log(chalk.blue('\n⚙️  Cleaning up config files...'));
+    
+    const configFiles = [
+      'tailwind.config.js',
+      'tailwind.config.ts',
+      'tailwind.config.cjs',
+      'postcss.config.js',
+      'postcss.config.cjs'
+    ];
+    
+    configFiles.forEach(config => {
+      const configPath = path.join(userProjectRoot, config);
+      if (fs.existsSync(configPath)) {
+        const answer2 = require('readline-sync').question(
+          chalk.yellow(`Remove ${config}? (y/N): `)
+        );
+        
+        if (answer2.toLowerCase() === 'y') {
+          fs.unlinkSync(configPath);
+          console.log(chalk.green(`✅ Removed: ${config}`));
+        }
+      }
+    });
+    
+    // 5. Revert vite.config.js
+    const viteConfigs = ['vite.config.js', 'vite.config.ts'];
+    viteConfigs.forEach(config => {
+      const configPath = path.join(userProjectRoot, config);
+      if (fs.existsSync(configPath)) {
+        console.log(chalk.yellow(`\n⚠️  Need to manually revert ${config}:`));
+        console.log(chalk.cyan('   Remove tailwindcss() plugin from vite.config.js'));
+        console.log(chalk.cyan('   Remove @tailwindcss/vite import if exists'));
+      }
+    });
+    
+    // 6. Revert index.css
+    const cssFiles = ['src/index.css', 'src/App.css', 'src/main.css'];
+    cssFiles.forEach(css => {
+      const cssPath = path.join(userProjectRoot, css);
+      if (fs.existsSync(cssPath)) {
+        let cssContent = fs.readFileSync(cssPath, 'utf-8');
+        if (cssContent.includes('@import "tailwindcss"')) {
+          cssContent = cssContent.replace(/@import "tailwindcss";?\n?/, '');
+          fs.writeFileSync(cssPath, cssContent);
+          console.log(chalk.green(`✅ Cleaned: ${css}`));
+        }
+      }
+    });
+    
+    console.log(chalk.green.bold('\n🎉 Purvex UI successfully uninstalled!'));
+    console.log(chalk.white('\nProject restored to pre-Purvex UI state.'));
+    
+  } catch (error) {
+    console.error(chalk.red('❌ Uninstall error:'), error.message);
+  }
+}
+
+module.exports = { uninstallProject };

package/src/index.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const chalk = require('chalk');
+const boxen = require('boxen');
+
+// Banner
+const banner = boxen.default(
+  chalk.green.bold('✨ Purvex UI') + 
+  chalk.white(' - React Component Generator\n') +
+  chalk.gray('Fast, customizable UI components for React + Tailwind'),
+  {
+    padding: 1,
+    margin: 1,
+    borderStyle: 'round',
+    borderColor: 'cyan'
+  }
+);
+
+console.log(banner);
+
+// Setup CLI
+const program = new Command();
+
+program
+  .name('purvex-ui')
+  .description('CLI untuk Purvex UI - Generator komponen React dengan Tailwind CSS')
+  .version('0.1.0');
+
+// Command: init
+program
+  .command('init')
+  .description('Initialize Purvex UI di project kamu')
+  .action(async () => {
+    const { initProject } = require('./commands/init');
+    await initProject();
+  });
+
+// Command: add
+program
+  .command('add <component>')
+  .description('Tambahkan komponen ke project')
+  .option('-p, --path <path>', 'Custom path untuk komponen (default: components/ui)', 'components/ui')
+  .action(async (component, options) => {
+    const { addComponent } = require('./commands/add');
+    await addComponent(component, options);
+  });
+
+// Command: list
+program
+  .command('list')
+  .description('Lihat semua komponen yang tersedia')
+  .action(async () => {
+    const fs = require('fs');
+    const path = require('path');
+    
+    try {
+      const registryPath = path.join(__dirname, '..', '..', '..', 'registry', 'components.json');
+      
+      if (!fs.existsSync(registryPath)) {
+        console.log(chalk.red('❌ Registry tidak ditemukan'));
+        return;
+      }
+      
+      const registryContent = fs.readFileSync(registryPath, 'utf-8');
+      const registry = JSON.parse(registryContent);
+      
+      console.log(chalk.blue.bold('\n📦 Komponen yang tersedia:\n'));
+      registry.components.forEach(comp => {
+        console.log(chalk.cyan(`  • ${comp.name}`));
+      });
+      console.log(chalk.gray(`\nTotal: ${registry.components.length} komponen`));
+      
+    } catch (error) {
+      console.error(chalk.red('❌ Error:'), error.message);
+    }
+  });
+
+
+// Command: setup
+program
+  .command('setup')
+  .description('Setup Purvex UI with Tailwind v4 and Purple Elegant theme')
+  .action(async () => {
+    const { setupProject } = require('./commands/setup');
+    await setupProject();
+  });
+
+// Command: fix
+program
+  .command('fix')
+  .description('Fix Purvex UI configuration (path alias, colors, etc)')
+  .action(async () => {
+    const { fixProject } = require('./commands/fix');
+    await fixProject();
+  });
+
+// Command: update-colors
+// program
+//   .command('update-colors')
+//   .description('Update color palette to Purple Elegant theme')
+//   .action(async () => {
+//     const { updateColors } = require('./commands/update-colors');
+//     await updateColors();
+//   });
+
+  // Command: install
+program
+  .command('install')
+  .description('Install all required dependencies automatically')
+  .action(async () => {
+    const { installDeps } = require('./commands/install');
+    await installDeps();
+  });
+
+  // Command: uninstall
+program
+  .command('uninstall')
+  .description('Remove Purvex UI from your project')
+  .action(async () => {
+    const { uninstallProject } = require('./commands/uninstall');
+    await uninstallProject();
+  });
+
+// Parse arguments
+program.parse();