galaxy-design 0.2.73 → 0.2.74

package/README.md

@@ -1,61 +1,94 @@
 # Galaxy UI CLI
 
-A modern, framework-agnostic CLI tool for adding beautiful, accessible UI components to your projects. Inspired by shadcn/ui, but supporting React, Vue, Angular, Next.js, and Nuxt.js.
+CLI for initializing Galaxy UI and copying framework-specific components into your project.
 
-## 🌟 Features
+## Features
 
-- 🚀 **Multi-framework support**: React, Vue, Angular, Next.js, and Nuxt.js
-- 📦 **41 production-ready components** across 8 categories
-- 🎨 **Built with Radix UI primitives** (radix-ui for React/Next.js, radix-vue for Vue/Nuxt.js, radix-ng for Angular)
-- 🌙 **Dark mode support** out of the box
-- 📱 **Responsive design** with mobile-first approach
-- ♿ **Accessibility-focused** (WAI-ARIA compliant)
-- 🎯 **TypeScript strict mode** support
-- 💅 **Tailwind CSS** for styling
-- 📝 **Customizable** - components are copied to your project
+- Supports `init`, `add`, and `migrate tailwind`
+- Detects React, Next.js, Vue, Nuxt.js, and Angular projects
+- Stores project settings in `components.json`
+- Scaffolds Tailwind in v4-first mode while preserving existing v3 projects
+- Copies components into your source tree so they remain editable
+- Fails clearly when remote component files cannot be fetched
 
-## 📦 Installation
+## Framework Mapping
+
+`nextjs` and `nuxtjs` are CLI target frameworks, not separate published component packages.
+
+- `nextjs` reuses the React source registry and adds Next-specific transforms such as `'use client'` when required
+- `nuxtjs` reuses the Vue source registry and keeps Vue/Nuxt-specific file structure intact
+
+That means the package/source-of-truth layer is still React for Next.js and Vue for Nuxt.js, while the CLI adapts the copied files for the target app.
+
+## Installation
 
 ```bash
-# Using npx (recommended - no installation needed)
 npx galaxy-design@latest init
+```
+
+Or install globally:
 
-# Or install globally
+```bash
 npm install -g galaxy-design
 bun add -g galaxy-design
 ```
 
-## 🚀 Quick Start
+## Quick Start
 
-### 1. Initialize Galaxy UI in your project
+### 1. Initialize
 
 ```bash
 npx galaxy-design@latest init
 ```
 
-This interactive command will:
+`init` currently does the following:
+
+- Detects the framework
+- Creates `components.json`
+- Installs core dependencies
+- Creates `components/ui` and the `cn()` utility
+- Detects Tailwind v3/v4 and scaffolds the matching mode
+
+Tailwind behavior:
+
+- Existing Tailwind v3 project: stays on v3
+- Existing Tailwind v4 project: stays on v4
+- No Tailwind detected: installs/scaffolds v4 by default
+
+### 1.5 Migrate Tailwind v3 To v4
+
+```bash
+npx galaxy-design@latest migrate tailwind --dry-run
+npx galaxy-design@latest migrate tailwind --yes
+```
+
+`migrate tailwind` currently focuses on the safe scaffold layer:
 
-- ✅ Detect your framework (React, Vue, Angular, Next.js, or Nuxt.js)
-- ✅ Detect your package manager (npm, pnpm, yarn, or bun)
-- ✅ Install required dependencies (lucide icons, clsx, tailwind-merge, radix primitives)
-- ✅ Create component directory structure
-- ✅ Setup Tailwind CSS configuration
-- ✅ Create utility files (cn helper, etc.)
+- Detects whether the current project still uses Tailwind v3
+- Rewrites the global CSS entry from `@tailwind ...` directives to `@import "tailwindcss";`
+- Rewrites the PostCSS config to use `@tailwindcss/postcss`
+- Updates `components.json` Tailwind version metadata when present
+- Reports utility classes that may need manual review in Tailwind v4
 
-### 2. Add components
+It does not try to auto-rewrite every potentially breaking utility class.
+
+### 2. Add Components
 
 ```bash
-# Add single component
+# Add one component
 npx galaxy-design@latest add button
 
-# Add multiple components
+# Add several components
 npx galaxy-design@latest add button input card
 
-# Interactive mode (select from list)
+# Interactive selection
 npx galaxy-design@latest add
+
+# Add everything in the current registry
+npx galaxy-design@latest add --all
 ```
 
-## 📚 Available Components (41 total)
+## Available Components
 
 ### 🎨 Form Components (9)
 
@@ -126,13 +159,13 @@ npx galaxy-design@latest add
 - `toggle` - Toggle buttons
 - `toggle-group` - Toggle button groups
 
-## 🎯 Framework-Specific Examples
+## Framework Examples
 
 ### React
 
 ```tsx
-import {Button} from '@/components/ui/button'
-import {Input} from '@/components/ui/input'
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 
 export function MyComponent() {
   return (
@@ -142,7 +175,7 @@ export function MyComponent() {
       </Button>
       <Input placeholder="Enter text..." />
     </div>
-  )
+  );
 }
 ```
 
@@ -150,8 +183,8 @@ export function MyComponent() {
 
 ```vue
 <script setup lang="ts">
-import {Button} from '@/components/ui/button'
-import {Input} from '@/components/ui/input'
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 </script>
 
 <template>
@@ -165,9 +198,9 @@ import {Input} from '@/components/ui/input'
 ### Angular
 
 ```typescript
-import {Component} from '@angular/core';
-import {ButtonDirective} from '@/components/ui/button';
-import {InputComponent} from '@/components/ui/input';
+import { Component } from '@angular/core';
+import { ButtonDirective } from '@/components/ui/button';
+import { InputComponent } from '@/components/ui/input';
 
 @Component({
   selector: 'app-my-component',
@@ -186,10 +219,10 @@ export class MyComponent {}
 ### Next.js
 
 ```tsx
-'use client'
+'use client';
 
-import {Button} from '@/components/ui/button'
-import {Input} from '@/components/ui/input'
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 
 export default function MyComponent() {
   return (
@@ -199,18 +232,20 @@ export default function MyComponent() {
       </Button>
       <Input placeholder="Enter text..." />
     </div>
-  )
+  );
 }
 ```
 
-**Note:** Galaxy UI CLI automatically adds the `'use client'` directive to components that use client-side features (hooks, event handlers, browser APIs). Server-compatible components won't have this directive added.
+`add` automatically preserves framework-specific transformations such as `'use client'` for Next.js components when needed.
+
+Next.js support is implemented as a React-source target inside the CLI, not as a separate `@galaxy-ui/nextjs` package.
 
 ### Nuxt.js
 
 ```vue
 <script setup lang="ts">
-import {Button} from '@/components/ui/button'
-import {Input} from '@/components/ui/input'
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 </script>
 
 <template>
@@ -221,11 +256,13 @@ import {Input} from '@/components/ui/input'
 </template>
 ```
 
-**Note:** Components work seamlessly with Nuxt 3's auto-import feature. Make sure to configure the `@/` alias in your `nuxt.config.ts`.
+Nuxt users should make sure the `@/` alias is available in `nuxt.config.ts`.
 
-## ⚙️ Configuration
+Nuxt.js support is implemented as a Vue-source target inside the CLI, not as a separate `@galaxy-ui/nuxtjs` package.
 
-Galaxy UI stores configuration in `components.json` at your project root:
+## Configuration
+
+Galaxy UI stores project settings in `components.json`:
 
 ```json
 {
@@ -233,8 +270,9 @@ Galaxy UI stores configuration in `components.json` at your project root:
   "framework": "react",
   "typescript": true,
   "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/app/globals.css",
+    "version": 4,
+    "config": "",
+    "css": "src/index.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""
@@ -249,24 +287,25 @@ Galaxy UI stores configuration in `components.json` at your project root:
 }
 ```
 
-### Configuration Options
+## Configuration Options
 
-| Option | Description | Default |
-|--------|-------------|---------|
-| `framework` | Your framework (react/vue/angular) | Auto-detected |
-| `typescript` | Use TypeScript | `true` |
-| `tailwind.config` | Tailwind config path | `tailwind.config.js` |
-| `tailwind.css` | Global CSS file | Framework-specific |
-| `tailwind.baseColor` | Base color scheme | `slate` |
-| `aliases.components` | Components alias | `@/components` |
-| `aliases.utils` | Utils alias | `@/lib/utils` |
-| `iconLibrary` | Icon library to use | `lucide` |
+| Option               | Description            | Default            |
+| -------------------- | ---------------------- | ------------------ |
+| `framework`          | Your framework         | Auto-detected      |
+| `typescript`         | Use TypeScript         | `true`             |
+| `tailwind.version`   | Tailwind major version | Auto-detected      |
+| `tailwind.config`    | Tailwind config path   | Framework-specific |
+| `tailwind.css`       | Global CSS file        | Framework-specific |
+| `tailwind.baseColor` | Base color scheme      | `slate`            |
+| `aliases.components` | Components alias       | `@/components`     |
+| `aliases.utils`      | Utils alias            | `@/lib/utils`      |
+| `iconLibrary`        | Icon library to use    | `lucide`           |
 
-## 🔧 CLI Commands
+## CLI Commands
 
 ### `init`
 
-Initialize Galaxy UI in your project.
+Initialize Galaxy UI in your project and scaffold `components.json`.
 
 ```bash
 npx galaxy-design@latest init
@@ -277,7 +316,7 @@ npx galaxy-design@latest init --yes
 
 ### `add`
 
-Add components to your project.
+Add registry components to your project.
 
 ```bash
 # Interactive mode
@@ -288,20 +327,11 @@ npx galaxy-design@latest add button input
 
 # Add all components
 npx galaxy-design@latest add --all
-
-# Overwrite existing components
-npx galaxy-design@latest add button --overwrite
 ```
 
-### `diff`
+There is currently no `diff` command and no `--overwrite` option on `add`.
 
-Check which components have updates available.
-
-```bash
-npx galaxy-design@latest diff button
-```
-
-## 🌈 Styling & Theming
+## Styling And Theming
 
 Galaxy UI uses Tailwind CSS with CSS variables for theming. After running `init`, you can customize colors in your CSS file:
 
@@ -323,7 +353,7 @@ Galaxy UI uses Tailwind CSS with CSS variables for theming. After running `init`
 }
 ```
 
-## 🎨 Customization
+## Customization
 
 Components are copied to your project, so you have full control:
 
@@ -332,29 +362,17 @@ Components are copied to your project, so you have full control:
 3. **Add features** - Extend components with your own functionality
 4. **No lock-in** - Components are yours to modify
 
-## 📖 Documentation & Examples
+## Documentation
 
-- **Live Examples**: Check `examples/` folder for complete React, Vue, and Angular apps
-- **Docs Website**: <https://galaxy-design.vercel.app>
-- **GitHub**: <https://github.com/buikevin/galaxy-design-cli>
+- Docs Website: <https://galaxy-design.vercel.app>
+- Repository: <https://github.com/buikevin/galaxy-design>
 
-## 🤝 Contributing
+## Notes
 
-Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md).
+- `add` currently fetches component source files from GitHub at runtime.
+- The CLI now fails explicitly if required files cannot be fetched.
+- `components.json` is the active configuration system. Legacy `galaxy.config.*` flow has been removed from source.
 
-## 📝 License
+## License
 
 MIT License - see [LICENSE](../../LICENSE) for details
-
-## 🙏 Credits
-
-- Inspired by [shadcn/ui](<https://ui.shadcn.com>)
-- Built with [Radix UI](<https://radix-ui.com>), [Radix Vue](<https://radix-vue.com>), and [Spartan NG](<https://spartan.ng>)
-- Icons from [Lucide](<https://lucide.dev>)
-- Styling with [Tailwind CSS](<https://tailwindcss.com>)
-
----
-
-**Made with ❤️ by the Galaxy UI team**
-
-For issues and feature requests, please visit our [GitHub Issues](<https://github.com/buikevin/galaxy-design-cli/issues>)

package/dist/bin.js

@@ -1,11 +1,27 @@
 #!/usr/bin/env node
+import { readFileSync } from 'fs';
+import { dirname, resolve } from 'path';
 import { Command } from 'commander';
+import { fileURLToPath } from 'url';
 import { initCommand } from './commands/init.js';
 import { addCommand } from './commands/add.js';
+import { migrateTailwindCommand } from './commands/migrate-tailwind.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+function getCliVersion() {
+    try {
+        const packageJsonPath = resolve(__dirname, '../package.json');
+        const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+        return packageJson.version || '0.0.0';
+    } catch (e) {
+        return '0.0.0';
+    }
+}
 const program = new Command();
-program.name('galaxy-design').description('CLI tool for Galaxy UI component library').version('0.2.2');
+program.name('galaxy-design').description('CLI tool for Galaxy UI component library').version(getCliVersion());
 program.command('init').description('Initialize Galaxy UI in your project').option('-y, --yes', 'Skip prompts and use defaults').option('-c, --cwd <path>', 'Current working directory', process.cwd()).action(initCommand);
 program.command('add').description('Add components to your project').argument('[components...]', 'Component names to add').option('-a, --all', 'Add all components').option('-c, --cwd <path>', 'Current working directory', process.cwd()).action(addCommand);
+program.command('migrate').description('Run Galaxy UI migration helpers').command('tailwind').description('Migrate a Tailwind v3 project to the Galaxy UI v4 scaffold').option('-c, --cwd <path>', 'Current working directory', process.cwd()).option('--dry-run', 'Preview the migration without writing files').option('-y, --yes', 'Skip confirmation prompts').action(migrateTailwindCommand);
 program.parse();
 
 //# sourceMappingURL=bin.js.map

package/dist/bin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bin.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { Command } from 'commander';\nimport { initCommand } from './commands/init.js';\nimport { addCommand } from './commands/add.js';\n\nconst program = new Command();\n\nprogram\n  .name('galaxy-design')\n  .description('CLI tool for Galaxy UI component library')\n  .version('0.2.2');\n\nprogram\n  .command('init')\n  .description('Initialize Galaxy UI in your project')\n  .option('-y, --yes', 'Skip prompts and use defaults')\n  .option('-c, --cwd <path>', 'Current working directory', process.cwd())\n  .action(initCommand);\n\nprogram\n  .command('add')\n  .description('Add components to your project')\n  .argument('[components...]', 'Component names to add')\n  .option('-a, --all', 'Add all components')\n  .option('-c, --cwd <path>', 'Current working directory', process.cwd())\n  .action(addCommand);\n\nprogram.parse();\n"],"names":["Command","initCommand","addCommand","program","name","description","version","command","option","process","cwd","action","argument","parse"],"mappings":";AACA,SAASA,OAAO,QAAQ,YAAY;AACpC,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,UAAU,QAAQ,oBAAoB;AAE/C,MAAMC,UAAU,IAAIH;AAEpBG,QACGC,IAAI,CAAC,iBACLC,WAAW,CAAC,4CACZC,OAAO,CAAC;AAEXH,QACGI,OAAO,CAAC,QACRF,WAAW,CAAC,wCACZG,MAAM,CAAC,aAAa,iCACpBA,MAAM,CAAC,oBAAoB,6BAA6BC,QAAQC,GAAG,IACnEC,MAAM,CAACV;AAEVE,QACGI,OAAO,CAAC,OACRF,WAAW,CAAC,kCACZO,QAAQ,CAAC,mBAAmB,0BAC5BJ,MAAM,CAAC,aAAa,sBACpBA,MAAM,CAAC,oBAAoB,6BAA6BC,QAAQC,GAAG,IACnEC,MAAM,CAACT;AAEVC,QAAQU,KAAK"}
+{"version":3,"sources":["../src/bin.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { readFileSync } from 'fs';\nimport { dirname, resolve } from 'path';\nimport { Command } from 'commander';\nimport { fileURLToPath } from 'url';\nimport { initCommand } from './commands/init.js';\nimport { addCommand } from './commands/add.js';\nimport { migrateTailwindCommand } from './commands/migrate-tailwind.js';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nfunction getCliVersion(): string {\n  try {\n    const packageJsonPath = resolve(__dirname, '../package.json');\n    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as {\n      version?: string;\n    };\n    return packageJson.version || '0.0.0';\n  } catch {\n    return '0.0.0';\n  }\n}\n\nconst program = new Command();\n\nprogram\n  .name('galaxy-design')\n  .description('CLI tool for Galaxy UI component library')\n  .version(getCliVersion());\n\nprogram\n  .command('init')\n  .description('Initialize Galaxy UI in your project')\n  .option('-y, --yes', 'Skip prompts and use defaults')\n  .option('-c, --cwd <path>', 'Current working directory', process.cwd())\n  .action(initCommand);\n\nprogram\n  .command('add')\n  .description('Add components to your project')\n  .argument('[components...]', 'Component names to add')\n  .option('-a, --all', 'Add all components')\n  .option('-c, --cwd <path>', 'Current working directory', process.cwd())\n  .action(addCommand);\n\nprogram\n  .command('migrate')\n  .description('Run Galaxy UI migration helpers')\n  .command('tailwind')\n  .description('Migrate a Tailwind v3 project to the Galaxy UI v4 scaffold')\n  .option('-c, --cwd <path>', 'Current working directory', process.cwd())\n  .option('--dry-run', 'Preview the migration without writing files')\n  .option('-y, --yes', 'Skip confirmation prompts')\n  .action(migrateTailwindCommand);\n\nprogram.parse();\n"],"names":["readFileSync","dirname","resolve","Command","fileURLToPath","initCommand","addCommand","migrateTailwindCommand","__filename","url","__dirname","getCliVersion","packageJsonPath","packageJson","JSON","parse","version","program","name","description","command","option","process","cwd","action","argument"],"mappings":";AACA,SAASA,YAAY,QAAQ,KAAK;AAClC,SAASC,OAAO,EAAEC,OAAO,QAAQ,OAAO;AACxC,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,aAAa,QAAQ,MAAM;AACpC,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,sBAAsB,QAAQ,iCAAiC;AAExE,MAAMC,aAAaJ,cAAc,YAAYK,GAAG;AAChD,MAAMC,YAAYT,QAAQO;AAE1B,SAASG;IACP,IAAI;QACF,MAAMC,kBAAkBV,QAAQQ,WAAW;QAC3C,MAAMG,cAAcC,KAAKC,KAAK,CAACf,aAAaY,iBAAiB;QAG7D,OAAOC,YAAYG,OAAO,IAAI;IAChC,EAAE,UAAM;QACN,OAAO;IACT;AACF;AAEA,MAAMC,UAAU,IAAId;AAEpBc,QACGC,IAAI,CAAC,iBACLC,WAAW,CAAC,4CACZH,OAAO,CAACL;AAEXM,QACGG,OAAO,CAAC,QACRD,WAAW,CAAC,wCACZE,MAAM,CAAC,aAAa,iCACpBA,MAAM,CAAC,oBAAoB,6BAA6BC,QAAQC,GAAG,IACnEC,MAAM,CAACnB;AAEVY,QACGG,OAAO,CAAC,OACRD,WAAW,CAAC,kCACZM,QAAQ,CAAC,mBAAmB,0BAC5BJ,MAAM,CAAC,aAAa,sBACpBA,MAAM,CAAC,oBAAoB,6BAA6BC,QAAQC,GAAG,IACnEC,MAAM,CAAClB;AAEVW,QACGG,OAAO,CAAC,WACRD,WAAW,CAAC,mCACZC,OAAO,CAAC,YACRD,WAAW,CAAC,8DACZE,MAAM,CAAC,oBAAoB,6BAA6BC,QAAQC,GAAG,IACnEF,MAAM,CAAC,aAAa,+CACpBA,MAAM,CAAC,aAAa,6BACpBG,MAAM,CAACjB;AAEVU,QAAQF,KAAK"}

package/dist/commands/add.js

@@ -1,18 +1,14 @@
 import prompts from 'prompts';
 import chalk from 'chalk';
 import ora from 'ora';
-import { resolve, join, dirname } from 'path';
-import { fileURLToPath } from 'url';
+import { resolve, join } from 'path';
 import { loadComponentsConfig, hasComponentsConfig } from '../utils/components-config.js';
 import { hasSrcDirectory } from '../utils/detect.js';
-import { loadFrameworkRegistry, getFrameworkComponent, getFrameworkComponentDependencies, getAllFrameworkComponents } from '../utils/framework-registry.js';
-import { writeFile, fileExists, ensureDir } from '../utils/files.js';
-import { installDependencies } from '../utils/package-manager.js';
-import { fetchFileFromGitHub } from '../utils/github-fetcher.js';
-import { transformComponent } from '../utils/component-transformer.js';
+import { getFrameworkComponent, getFrameworkComponentDependencies, getAllFrameworkComponents, resolveFrameworkComponentGraph, resolveFrameworkComponentName } from '../utils/framework-registry-service.js';
+import { ensureDir } from '../utils/files.js';
+import { detectPackageManager, formatInstallCommand, installDependencies } from '../utils/package-manager.js';
+import { copyComponentFilesToDirectory } from '../utils/component-copier.js';
 import { generateAngularProvidersIndex } from '../utils/angular-provider-manager.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
 export async function addCommand(components, options) {
     const cwd = options.cwd;
     // Check if components.json exists (new config system)
@@ -29,8 +25,6 @@ export async function addCommand(components, options) {
     }
     const framework = componentsConfig.framework;
     console.log(chalk.gray(`Framework detected: ${chalk.cyan(framework)}\n`));
-    // Load framework-specific registry
-    const registry = loadFrameworkRegistry(framework);
     const allComponents = getAllFrameworkComponents(framework);
     // Determine which components to add
     let componentsToAdd = [];
@@ -81,9 +75,9 @@ export async function addCommand(components, options) {
     } else {
         // Add specified components
         for (const input of components){
-            // Check if component exists in registry
-            if (allComponents[input]) {
-                componentsToAdd.push(input);
+            const resolvedName = resolveFrameworkComponentName(framework, input);
+            if (resolvedName && allComponents[resolvedName]) {
+                componentsToAdd.push(resolvedName);
             } else {
                 console.log(chalk.yellow(`⚠ Component "${input}" not found. Skipping.`));
             }
@@ -97,24 +91,7 @@ export async function addCommand(components, options) {
     componentsToAdd = [
         ...new Set(componentsToAdd)
     ];
-    // Resolve registry dependencies
-    const resolvedComponents = new Set(componentsToAdd);
-    const toProcess = [
-        ...componentsToAdd
-    ];
-    while(toProcess.length > 0){
-        const componentKey = toProcess.pop();
-        const component = getFrameworkComponent(framework, componentKey);
-        if (component && component.registryDependencies && component.registryDependencies.length > 0) {
-            for (const depKey of component.registryDependencies){
-                if (!resolvedComponents.has(depKey)) {
-                    resolvedComponents.add(depKey);
-                    toProcess.push(depKey);
-                }
-            }
-        }
-    }
-    componentsToAdd = Array.from(resolvedComponents);
+    componentsToAdd = resolveFrameworkComponentGraph(framework, componentsToAdd);
     console.log(chalk.bold.cyan(`\n📦 Adding ${componentsToAdd.length} component(s)...\n`));
     // Collect all dependencies
     const allDependencies = [];
@@ -123,6 +100,7 @@ export async function addCommand(components, options) {
     const results = [];
     for (const componentKey of componentsToAdd){
         const component = getFrameworkComponent(framework, componentKey);
+        let componentFileErrors = [];
         if (!component) {
             results.push({
                 name: componentKey,
@@ -141,67 +119,27 @@ export async function addCommand(components, options) {
             const baseDir = usesSrcDir ? 'src/' : '';
             const fullDestPath = resolve(cwd, baseDir + destPath, 'ui');
             ensureDir(fullDestPath);
-            // Get file extension based on framework
-            const fileExtensions = {
-                vue: '.vue',
-                react: '.tsx',
-                angular: '.component.ts',
-                'react-native': '.tsx',
-                flutter: '.dart'
-            };
-            const ext = fileExtensions[framework];
             // Create component folder
             const componentFolderPath = join(fullDestPath, componentKey);
             ensureDir(componentFolderPath);
-            // Map framework to actual package framework for GitHub path
-            // Next.js uses React components, Nuxt.js uses Vue components
-            let packageFramework = framework;
-            if (framework === 'nextjs') packageFramework = 'react';
-            if (framework === 'nuxtjs') packageFramework = 'vue';
-            // Copy component files from GitHub
-            for (const file of component.files){
-                const fileName = file.includes('/') ? file.split('/').pop() : file;
-                const destFilePath = join(componentFolderPath, fileName);
-                // Check if file already exists
-                if (fileExists(destFilePath)) {
+            const copyResult = await copyComponentFilesToDirectory({
+                componentName: componentKey,
+                componentFiles: component.files,
+                componentType: component.type,
+                sourcePlatform: framework,
+                targetPlatform: framework,
+                targetDirectory: componentFolderPath,
+                relativeTo: cwd,
+                overwrite: false,
+                onSkippedFile: (fileName)=>{
                     spinner.warn(`${chalk.cyan(component.name)} - File already exists: ${fileName}`);
-                    continue;
-                }
-                try {
-                    // Fetch file from GitHub (use packageFramework for correct path)
-                    const sourceFolder = component.type === 'block' ? 'blocks' : 'components';
-                    const githubPath = `packages/${packageFramework}/src/${sourceFolder}/${componentKey}/${file}`;
-                    let content = await fetchFileFromGitHub(githubPath);
-                    // Apply transformations (import path fixes, 'use client' for Next.js, etc.)
-                    const transformResult = transformComponent(content, {
-                        platform: framework,
-                        componentName: componentKey,
-                        filePath: destFilePath
-                    });
-                    content = transformResult.content;
-                    writeFile(destFilePath, content);
-                } catch (error) {
-                    // Try with capitalized file name
-                    try {
-                        const capitalizedFile = file.charAt(0).toUpperCase() + file.slice(1);
-                        const sourceFolder = component.type === 'block' ? 'blocks' : 'components';
-                        const githubPath = `packages/${packageFramework}/src/${sourceFolder}/${componentKey}/${capitalizedFile}`;
-                        let content = await fetchFileFromGitHub(githubPath);
-                        // Apply transformations (import path fixes, 'use client' for Next.js, etc.)
-                        const transformResult = transformComponent(content, {
-                            platform: framework,
-                            componentName: componentKey,
-                            filePath: destFilePath
-                        });
-                        content = transformResult.content;
-                        writeFile(destFilePath, content);
-                    } catch (capitalizedError) {
-                        // If both attempts fail, write a placeholder
-                        const placeholderContent = `// ${component.name} component for ${framework}\n// TODO: Failed to fetch component from GitHub: ${error instanceof Error ? error.message : 'Unknown error'}\n`;
-                        writeFile(destFilePath, placeholderContent);
-                        spinner.warn(`${chalk.yellow('⚠')} Failed to fetch ${file} from GitHub, created placeholder`);
-                    }
                 }
+            });
+            if (!copyResult.success) {
+                componentFileErrors = [
+                    ...copyResult.errors
+                ];
+                throw new Error(`Missing or invalid files: ${copyResult.errors.length}`);
             }
             spinner.succeed(`${chalk.green('✓')} Added ${chalk.cyan(component.name)} to ${chalk.gray(destPath + '/ui/' + componentKey + '/')}`);
             results.push({
@@ -218,7 +156,8 @@ export async function addCommand(components, options) {
             results.push({
                 name: component.name,
                 success: false,
-                error: error instanceof Error ? error.message : 'Unknown error'
+                error: error instanceof Error ? error.message : 'Unknown error',
+                details: componentFileErrors
             });
         }
     }
@@ -251,11 +190,12 @@ export async function addCommand(components, options) {
         } catch (error) {
             installSpinner.fail('Failed to install dependencies');
             console.log(chalk.yellow('Please install them manually:'));
+            const packageManager = detectPackageManager(cwd);
             if (uniqueDependencies.length > 0) {
-                console.log(chalk.gray(`  npm install ${uniqueDependencies.join(' ')}`));
+                console.log(chalk.gray(`  ${formatInstallCommand(packageManager, uniqueDependencies)}`));
             }
             if (uniqueDevDependencies.length > 0) {
-                console.log(chalk.gray(`  npm install -D ${uniqueDevDependencies.join(' ')}`));
+                console.log(chalk.gray(`  ${formatInstallCommand(packageManager, uniqueDevDependencies, true)}`));
             }
         }
     }
@@ -270,6 +210,11 @@ export async function addCommand(components, options) {
         console.log(chalk.red.bold(`✗ Failed to add ${failed} component(s)`));
         for (const result of results.filter((r)=>!r.success)){
             console.log(chalk.red(`  - ${result.name}: ${result.error}`));
+            if (result.details && result.details.length > 0) {
+                for (const detail of result.details){
+                    console.log(chalk.gray(`    ${detail}`));
+                }
+            }
         }
     }
     // For Angular, generate/update the components/ui/index.ts file with providers
@@ -295,22 +240,37 @@ export async function addCommand(components, options) {
     // Next steps
     if (successful > 0) {
         console.log('\n' + chalk.gray('Next steps:'));
+        const nextSteps = [];
         switch(framework){
             case 'vue':
-                console.log(chalk.gray('  1. Import the components in your Vue component'));
-                console.log(chalk.gray('  2. Use them in your template'));
+            case 'nuxtjs':
+                nextSteps.push('Import the components in your Vue component');
+                nextSteps.push('Use them in your template');
                 break;
             case 'react':
-                console.log(chalk.gray('  1. Import the components in your React component'));
-                console.log(chalk.gray('  2. Use them in your JSX'));
+            case 'nextjs':
+                nextSteps.push('Import the components in your React component');
+                nextSteps.push('Use them in your JSX');
                 break;
             case 'angular':
-                console.log(chalk.gray('  1. Import provideGalaxyComponents() in your app.config.ts providers array'));
-                console.log(chalk.gray('  2. Import the components in your Angular component'));
-                console.log(chalk.gray('  3. Use them in your templates'));
+                nextSteps.push('Import provideGalaxyComponents() in your app.config.ts providers array');
+                nextSteps.push('Import the components in your Angular component');
+                nextSteps.push('Use them in your templates');
+                break;
+            case 'react-native':
+                nextSteps.push('Import the components in your React Native screen or component');
+                nextSteps.push('Ensure your NativeWind and alias configuration resolves `@/*` imports');
+                break;
+            case 'flutter':
+                nextSteps.push('Import the generated widgets in your Dart files');
+                nextSteps.push('Run `flutter pub get` if new Dart dependencies were added');
                 break;
         }
-        console.log(chalk.gray('  4. Enjoy building with Galaxy UI! 🚀\n'));
+        nextSteps.push('Enjoy building with Galaxy UI!');
+        nextSteps.forEach((step, index)=>{
+            console.log(chalk.gray(`  ${index + 1}. ${step}`));
+        });
+        console.log('');
     }
 }