@gilav21/shadcn-angular 0.0.9 → 0.0.11

package/dist/templates/styles.js

@@ -7,8 +7,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.145 0 0)',
             '--popover': 'oklch(1 0 0)',
             '--popover-foreground': 'oklch(0.145 0 0)',
-            '--primary': 'oklch(0.205 0 0)',
-            '--primary-foreground': 'oklch(0.985 0 0)',
             '--secondary': 'oklch(0.97 0 0)',
             '--secondary-foreground': 'oklch(0.205 0 0)',
             '--muted': 'oklch(0.97 0 0)',
@@ -18,7 +16,6 @@ const baseColors = {
             '--destructive': 'oklch(0.577 0.245 27.325)',
             '--border': 'oklch(0.922 0 0)',
             '--input': 'oklch(0.922 0 0)',
-            '--ring': 'oklch(0.708 0 0)',
         },
         dark: {
             '--background': 'oklch(0.145 0 0)',
@@ -27,8 +24,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.985 0 0)',
             '--popover': 'oklch(0.269 0 0)',
             '--popover-foreground': 'oklch(0.985 0 0)',
-            '--primary': 'oklch(0.922 0 0)',
-            '--primary-foreground': 'oklch(0.205 0 0)',
             '--secondary': 'oklch(0.269 0 0)',
             '--secondary-foreground': 'oklch(0.985 0 0)',
             '--muted': 'oklch(0.269 0 0)',
@@ -38,7 +33,6 @@ const baseColors = {
             '--destructive': 'oklch(0.704 0.191 22.216)',
             '--border': 'oklch(1 0 0 / 10%)',
             '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.556 0 0)',
         },
     },
     slate: {
@@ -49,8 +43,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.129 0.042 264.695)',
             '--popover': 'oklch(1 0 0)',
             '--popover-foreground': 'oklch(0.129 0.042 264.695)',
-            '--primary': 'oklch(0.208 0.042 265.755)',
-            '--primary-foreground': 'oklch(0.984 0.003 247.858)',
             '--secondary': 'oklch(0.968 0.007 247.896)',
             '--secondary-foreground': 'oklch(0.208 0.042 265.755)',
             '--muted': 'oklch(0.968 0.007 247.896)',
@@ -60,7 +52,6 @@ const baseColors = {
             '--destructive': 'oklch(0.577 0.245 27.325)',
             '--border': 'oklch(0.929 0.013 255.508)',
             '--input': 'oklch(0.929 0.013 255.508)',
-            '--ring': 'oklch(0.704 0.04 256.788)',
         },
         dark: {
             '--background': 'oklch(0.129 0.042 264.695)',
@@ -69,8 +60,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.984 0.003 247.858)',
             '--popover': 'oklch(0.269 0.04 260.031)',
             '--popover-foreground': 'oklch(0.984 0.003 247.858)',
-            '--primary': 'oklch(0.929 0.013 255.508)',
-            '--primary-foreground': 'oklch(0.208 0.042 265.755)',
             '--secondary': 'oklch(0.269 0.04 260.031)',
             '--secondary-foreground': 'oklch(0.984 0.003 247.858)',
             '--muted': 'oklch(0.269 0.04 260.031)',
@@ -80,7 +69,6 @@ const baseColors = {
             '--destructive': 'oklch(0.704 0.191 22.216)',
             '--border': 'oklch(1 0 0 / 10%)',
             '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.554 0.046 257.417)',
         },
     },
     stone: {
@@ -91,8 +79,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.147 0.004 49.25)',
             '--popover': 'oklch(1 0 0)',
             '--popover-foreground': 'oklch(0.147 0.004 49.25)',
-            '--primary': 'oklch(0.216 0.006 56.043)',
-            '--primary-foreground': 'oklch(0.985 0.001 106.423)',
             '--secondary': 'oklch(0.97 0.001 106.424)',
             '--secondary-foreground': 'oklch(0.216 0.006 56.043)',
             '--muted': 'oklch(0.97 0.001 106.424)',
@@ -102,7 +88,6 @@ const baseColors = {
             '--destructive': 'oklch(0.577 0.245 27.325)',
             '--border': 'oklch(0.923 0.003 48.717)',
             '--input': 'oklch(0.923 0.003 48.717)',
-            '--ring': 'oklch(0.709 0.01 56.259)',
         },
         dark: {
             '--background': 'oklch(0.147 0.004 49.25)',
@@ -111,8 +96,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.985 0.001 106.423)',
             '--popover': 'oklch(0.268 0.007 34.298)',
             '--popover-foreground': 'oklch(0.985 0.001 106.423)',
-            '--primary': 'oklch(0.923 0.003 48.717)',
-            '--primary-foreground': 'oklch(0.216 0.006 56.043)',
             '--secondary': 'oklch(0.268 0.007 34.298)',
             '--secondary-foreground': 'oklch(0.985 0.001 106.423)',
             '--muted': 'oklch(0.268 0.007 34.298)',
@@ -122,7 +105,6 @@ const baseColors = {
             '--destructive': 'oklch(0.704 0.191 22.216)',
             '--border': 'oklch(1 0 0 / 10%)',
             '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.553 0.013 58.071)',
         },
     },
     gray: {
@@ -133,8 +115,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.13 0.028 261.692)',
             '--popover': 'oklch(1 0 0)',
             '--popover-foreground': 'oklch(0.13 0.028 261.692)',
-            '--primary': 'oklch(0.21 0.028 264.532)',
-            '--primary-foreground': 'oklch(0.985 0.002 247.839)',
             '--secondary': 'oklch(0.967 0.003 264.542)',
             '--secondary-foreground': 'oklch(0.21 0.028 264.532)',
             '--muted': 'oklch(0.967 0.003 264.542)',
@@ -144,7 +124,6 @@ const baseColors = {
             '--destructive': 'oklch(0.577 0.245 27.325)',
             '--border': 'oklch(0.928 0.006 264.531)',
             '--input': 'oklch(0.928 0.006 264.531)',
-            '--ring': 'oklch(0.707 0.022 264.436)',
         },
         dark: {
             '--background': 'oklch(0.13 0.028 261.692)',
@@ -153,8 +132,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.985 0.002 247.839)',
             '--popover': 'oklch(0.274 0.029 256.848)',
             '--popover-foreground': 'oklch(0.985 0.002 247.839)',
-            '--primary': 'oklch(0.928 0.006 264.531)',
-            '--primary-foreground': 'oklch(0.21 0.028 264.532)',
             '--secondary': 'oklch(0.274 0.029 256.848)',
             '--secondary-foreground': 'oklch(0.985 0.002 247.839)',
             '--muted': 'oklch(0.274 0.029 256.848)',
@@ -164,7 +141,6 @@ const baseColors = {
             '--destructive': 'oklch(0.704 0.191 22.216)',
             '--border': 'oklch(1 0 0 / 10%)',
             '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.551 0.027 264.364)',
         },
     },
     zinc: {
@@ -175,8 +151,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.141 0.005 285.823)',
             '--popover': 'oklch(1 0 0)',
             '--popover-foreground': 'oklch(0.141 0.005 285.823)',
-            '--primary': 'oklch(0.21 0.006 285.885)',
-            '--primary-foreground': 'oklch(0.985 0 0)',
             '--secondary': 'oklch(0.967 0.001 286.375)',
             '--secondary-foreground': 'oklch(0.21 0.006 285.885)',
             '--muted': 'oklch(0.967 0.001 286.375)',
@@ -186,7 +160,6 @@ const baseColors = {
             '--destructive': 'oklch(0.577 0.245 27.325)',
             '--border': 'oklch(0.92 0.004 286.32)',
             '--input': 'oklch(0.92 0.004 286.32)',
-            '--ring': 'oklch(0.705 0.015 286.067)',
         },
         dark: {
             '--background': 'oklch(0.141 0.005 285.823)',
@@ -195,8 +168,6 @@ const baseColors = {
             '--card-foreground': 'oklch(0.985 0 0)',
             '--popover': 'oklch(0.274 0.006 286.033)',
             '--popover-foreground': 'oklch(0.985 0 0)',
-            '--primary': 'oklch(0.92 0.004 286.32)',
-            '--primary-foreground': 'oklch(0.21 0.006 285.885)',
             '--secondary': 'oklch(0.274 0.006 286.033)',
             '--secondary-foreground': 'oklch(0.985 0 0)',
             '--muted': 'oklch(0.274 0.006 286.033)',
@@ -206,17 +177,73 @@ const baseColors = {
             '--destructive': 'oklch(0.704 0.191 22.216)',
             '--border': 'oklch(1 0 0 / 10%)',
             '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.552 0.016 285.938)',
         },
     },
 };
+const themeColors = {
+    neutral: {
+        light: { '--primary': 'oklch(0.205 0 0)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.708 0 0)' },
+        dark: { '--primary': 'oklch(0.985 0 0)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.708 0 0)' },
+    },
+    zinc: {
+        light: { '--primary': 'oklch(0.205 0 0)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.708 0 0)' },
+        dark: { '--primary': 'oklch(0.985 0 0)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.708 0 0)' },
+    },
+    slate: {
+        light: { '--primary': 'oklch(0.208 0.042 265.755)', '--primary-foreground': 'oklch(0.984 0.003 247.858)', '--ring': 'oklch(0.704 0.04 256.788)' },
+        dark: { '--primary': 'oklch(0.929 0.013 255.508)', '--primary-foreground': 'oklch(0.208 0.042 265.755)', '--ring': 'oklch(0.704 0.04 256.788)' },
+    },
+    stone: {
+        light: { '--primary': 'oklch(0.216 0.006 56.043)', '--primary-foreground': 'oklch(0.985 0.001 106.423)', '--ring': 'oklch(0.709 0.01 56.259)' },
+        dark: { '--primary': 'oklch(0.923 0.003 48.717)', '--primary-foreground': 'oklch(0.216 0.006 56.043)', '--ring': 'oklch(0.553 0.013 58.071)' },
+    },
+    gray: {
+        light: { '--primary': 'oklch(0.21 0.028 264.532)', '--primary-foreground': 'oklch(0.985 0.002 247.839)', '--ring': 'oklch(0.707 0.022 264.436)' },
+        dark: { '--primary': 'oklch(0.928 0.006 264.531)', '--primary-foreground': 'oklch(0.21 0.028 264.532)', '--ring': 'oklch(0.551 0.027 264.364)' },
+    },
+    red: {
+        light: { '--primary': 'oklch(0.577 0.245 27.325)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.577 0.245 27.325)' },
+        dark: { '--primary': 'oklch(0.577 0.245 27.325)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.577 0.245 27.325)' },
+    },
+    rose: {
+        light: { '--primary': 'oklch(0.645 0.246 16.439)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.645 0.246 16.439)' },
+        dark: { '--primary': 'oklch(0.645 0.246 16.439)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.645 0.246 16.439)' },
+    },
+    orange: {
+        light: { '--primary': 'oklch(0.646 0.222 41.116)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.646 0.222 41.116)' },
+        dark: { '--primary': 'oklch(0.646 0.222 41.116)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.646 0.222 41.116)' },
+    },
+    green: {
+        light: { '--primary': 'oklch(0.623 0.214 131.655)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.623 0.214 131.655)' },
+        dark: { '--primary': 'oklch(0.623 0.214 131.655)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.623 0.214 131.655)' },
+    },
+    blue: {
+        light: { '--primary': 'oklch(0.546 0.245 262.881)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.546 0.245 262.881)' },
+        dark: { '--primary': 'oklch(0.546 0.245 262.881)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.546 0.245 262.881)' },
+    },
+    yellow: {
+        light: { '--primary': 'oklch(0.82 0.185 84.67)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.82 0.185 84.67)' },
+        dark: { '--primary': 'oklch(0.82 0.185 84.67)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.82 0.185 84.67)' },
+    },
+    violet: {
+        light: { '--primary': 'oklch(0.558 0.288 302.321)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.558 0.288 302.321)' },
+        dark: { '--primary': 'oklch(0.558 0.288 302.321)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.558 0.288 302.321)' },
+    },
+    amber: {
+        light: { '--primary': 'oklch(0.77 0.16 70)', '--primary-foreground': 'oklch(0.145 0 0)', '--ring': 'oklch(0.77 0.16 70)' },
+        dark: { '--primary': 'oklch(0.77 0.16 70)', '--primary-foreground': 'oklch(0.145 0 0)', '--ring': 'oklch(0.77 0.16 70)' },
+    },
+};
 function generateCssVars(vars, indent = '  ') {
     return Object.entries(vars)
         .map(([key, value]) => `${indent}${key}: ${value};`)
         .join('\n');
 }
-export function getStylesTemplate(baseColor = 'neutral') {
-    const colors = baseColors[baseColor];
+export function getStylesTemplate(baseColor = 'neutral', themeColor = 'zinc') {
+    const base = baseColors[baseColor];
+    const theme = themeColors[themeColor] || themeColors.neutral;
+    const lightVars = { ...base.light, ...theme.light };
+    const darkVars = { ...base.dark, ...theme.dark };
     return `@import "tailwindcss";
 
 /* Tell Tailwind v4 where to scan for classes */
@@ -227,7 +254,7 @@ export function getStylesTemplate(baseColor = 'neutral') {
 
 :root {
   --radius: 0.625rem;
-${generateCssVars(colors.light)}
+${generateCssVars(lightVars)}
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -244,7 +271,7 @@ ${generateCssVars(colors.light)}
 }
 
 .dark {
-${generateCssVars(colors.dark)}
+${generateCssVars(darkVars)}
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -314,6 +341,7 @@ ${generateCssVars(colors.dark)}
   }
   html {
     font-family: var(--font-sans);
+    font-size: 16px;
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {

package/dist/templates/utils.js

@@ -8,5 +8,14 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Check if the current direction is RTL by reading the computed style of the element.
+ * This allows components to detect RTL without needing an explicit input.
+ */
+export function isRtl(el: HTMLElement): boolean {
+    return getComputedStyle(el).direction === 'rtl';
+}
+
 `;
 }

package/dist/utils/config.d.ts

@@ -1,9 +1,10 @@
 export interface Config {
     $schema: string;
-    style: 'default' | 'new-york';
+    style: 'default';
     tailwind: {
         css: string;
         baseColor: 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
+        theme?: 'zinc' | 'slate' | 'stone' | 'gray' | 'neutral' | 'red' | 'rose' | 'orange' | 'green' | 'blue' | 'yellow' | 'violet' | 'amber';
         cssVariables: boolean;
     };
     aliases: {

package/dist/utils/config.js

@@ -7,6 +7,7 @@ export function getDefaultConfig() {
         tailwind: {
             css: 'src/styles.scss',
             baseColor: 'neutral',
+            theme: 'zinc',
             cssVariables: true,
         },
         aliases: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.9",
+    "version": "0.0.11",
     "description": "CLI for adding shadcn-angular components to your project",
     "bin": {
         "shadcn-angular": "./dist/index.js"
@@ -32,4 +32,4 @@
         "@types/prompts": "^2.4.9",
         "typescript": "^5.5.0"
     }
-}
+}

package/src/commands/add.ts

@@ -124,38 +124,106 @@ export async function add(components: string[], options: AddOptions) {
         ? path.join(cwd, options.path)
         : path.join(cwd, 'src/components/ui');
 
-    // Check for existing files
-    const existing: string[] = [];
+    // Check for existing files and diff
+    const componentsToInstall: ComponentName[] = [];
+    const componentsToSkip: string[] = [];
+    const conflictingComponents: ComponentName[] = [];
+    const contentCache = new Map<string, string>();
+
+    const checkSpinner = ora('Checking for conflicts...').start();
+
     for (const name of allComponents) {
         const component = registry[name];
+        let hasChanges = false;
+        let isFullyPresent = true;
+
         for (const file of component.files) {
             const targetPath = path.join(targetDir, file);
             if (await fs.pathExists(targetPath)) {
-                existing.push(file);
+                const localContent = await fs.readFile(targetPath, 'utf-8');
+
+                try {
+                    let remoteContent = await fetchComponentContent(file, options);
+                    // Transform imports for comparison
+                    const utilsAlias = config.aliases.utils;
+                    remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+
+                    const normalize = (str: string) => str.replace(/\s+/g, '').trim();
+                    if (normalize(localContent) !== normalize(remoteContent)) {
+                        hasChanges = true;
+                    }
+                    contentCache.set(file, remoteContent); // Cache for installation
+                } catch (error) {
+                    // unexpected error fetching remote
+                    console.warn(`Could not fetch remote content for comparison: ${file}`);
+                    hasChanges = true; // Assume changed/unknown
+                }
+            } else {
+                isFullyPresent = false;
             }
         }
+
+        if (isFullyPresent && !hasChanges) {
+            componentsToSkip.push(name);
+        } else if (hasChanges) {
+            conflictingComponents.push(name);
+        } else {
+            componentsToInstall.push(name);
+        }
     }
 
-    if (existing.length > 0 && !options.overwrite && !options.yes) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: `The following files already exist: ${existing.join(', ')}. Overwrite?`,
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Installation cancelled.'));
-            return;
+    checkSpinner.stop();
+
+    let componentsToOverwrite: ComponentName[] = [];
+
+    if (conflictingComponents.length > 0) {
+        if (options.overwrite) {
+            componentsToOverwrite = conflictingComponents;
+        } else if (options.yes) {
+            componentsToOverwrite = []; // Skip conflicts in non-interactive mode unless --overwrite
+        } else {
+            console.log(chalk.yellow(`\n${conflictingComponents.length} component(s) have local changes or are different from remote.`));
+            const { selected } = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to OVERWRITE (Unselected will be skipped):',
+                choices: conflictingComponents.map(name => ({
+                    title: name,
+                    value: name,
+                })),
+                hint: '- Space to select, Enter to confirm',
+            });
+            componentsToOverwrite = selected || [];
         }
     }
 
+    // Final list of components to process
+    // We process:
+    // 1. componentsToInstall (Brand new or partial)
+    // 2. componentsToOverwrite (User selected)
+    // We SKIP:
+    // 1. componentsToSkip (Identical)
+    // 2. conflictingComponents NOT in componentsToOverwrite
+
+    const finalComponents = [...componentsToInstall, ...componentsToOverwrite];
+
+    if (finalComponents.length === 0 && componentsToSkip.length > 0) {
+        console.log(chalk.green(`\nAll components are up to date! (${componentsToSkip.length} skipped)`));
+        return;
+    }
+
+    if (finalComponents.length === 0) {
+        console.log(chalk.dim('\nNo components to install.'));
+        return;
+    }
+
     const spinner = ora('Installing components...').start();
     let successCount = 0;
 
     try {
         await fs.ensureDir(targetDir);
 
-        for (const name of allComponents) {
+        for (const name of finalComponents) {
             const component = registry[name];
             let componentSuccess = true;
 
@@ -163,35 +231,48 @@ export async function add(components: string[], options: AddOptions) {
                 const targetPath = path.join(targetDir, file);
 
                 try {
-                    let content = await fetchComponentContent(file, options);
+                    let content = contentCache.get(file);
+                    if (!content) {
+                        content = await fetchComponentContent(file, options);
+                        // Transform imports if not already transformed (cached is transformed)
+                        const utilsAlias = config.aliases.utils;
+                        content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    }
 
-                    // Transform imports
-                    // Replace ../lib/utils (or similar relative paths) with the configured alias
-                    const utilsAlias = config.aliases.utils;
-                    content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
                     await fs.ensureDir(path.dirname(targetPath));
                     await fs.writeFile(targetPath, content);
-                    spinner.text = `Added ${file}`;
+                    // spinner.text = `Added ${file}`; // Too verbose?
                 } catch (err: any) {
                     spinner.warn(`Could not add ${file}: ${err.message}`);
                     componentSuccess = false;
                 }
             }
-            if (componentSuccess) successCount++;
+            if (componentSuccess) {
+                successCount++;
+                spinner.text = `Added ${name}`;
+            }
         }
 
         if (successCount > 0) {
-            spinner.succeed(chalk.green(`Added ${successCount} component(s)`));
+            spinner.succeed(chalk.green(`Success! Added ${successCount} component(s)`));
 
             console.log('\n' + chalk.dim('Components added:'));
-            allComponents.forEach(name => {
+            finalComponents.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.cyan(name));
             });
-            console.log('');
         } else {
-            spinner.fail(chalk.red('Failed to add any components.'));
+            spinner.info('No new components installed.');
         }
 
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            componentsToSkip.forEach(name => {
+                console.log(chalk.dim('  - ') + chalk.gray(name));
+            });
+        }
+
+        console.log('');
+
     } catch (error) {
         spinner.fail('Failed to add components');
         console.error(error);

package/src/commands/init.ts

@@ -46,29 +46,70 @@ export async function init(options: InitOptions) {
     if (options.defaults || options.yes) {
         config = getDefaultConfig();
     } else {
+        const THEME_COLORS: Record<string, string> = {
+            zinc: '#71717a',
+            slate: '#64748b',
+            stone: '#78716c',
+            gray: '#6b7280',
+            neutral: '#737373',
+            red: '#ef4444',
+            rose: '#f43f5e',
+            orange: '#f97316', // bright orange
+            green: '#22c55e',
+            blue: '#3b82f6',
+            yellow: '#eab308',
+            violet: '#8b5cf6',
+            amber: '#d97706', // warm amber for preview
+        };
+
+        const themeChoices = [
+            { title: 'Zinc', value: 'zinc' },
+            { title: 'Slate', value: 'slate' },
+            { title: 'Stone', value: 'stone' },
+            { title: 'Gray', value: 'gray' },
+            { title: 'Neutral', value: 'neutral' },
+            { title: 'Red', value: 'red' },
+            { title: 'Rose', value: 'rose' },
+            { title: 'Orange', value: 'orange' },
+            { title: 'Green', value: 'green' },
+            { title: 'Blue', value: 'blue' },
+            { title: 'Yellow', value: 'yellow' },
+            { title: 'Violet', value: 'violet' },
+            { title: 'Amber', value: 'amber' },
+        ].map(c => ({
+            ...c,
+            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
+        }));
+
+        const baseColorChoices = [
+            { title: 'Neutral', value: 'neutral' },
+            { title: 'Slate', value: 'slate' },
+            { title: 'Stone', value: 'stone' },
+            { title: 'Gray', value: 'gray' },
+            { title: 'Zinc', value: 'zinc' },
+        ].map(c => ({
+            ...c,
+            title: `${chalk.hex(THEME_COLORS[c.value])('██')} ${c.title}`
+        }));
+
         const responses = await prompts([
+
             {
                 type: 'select',
-                name: 'style',
-                message: 'Which style would you like to use?',
-                choices: [
-                    { title: 'Default', value: 'default' },
-                    { title: 'New York', value: 'new-york' },
-                ],
+                name: 'baseColor',
+                message: 'Which color would you like to use as base color?',
+                choices: baseColorChoices,
                 initial: 0,
             },
             {
                 type: 'select',
-                name: 'baseColor',
-                message: 'Which color would you like to use as base color?',
-                choices: [
-                    { title: 'Neutral', value: 'neutral' },
-                    { title: 'Slate', value: 'slate' },
-                    { title: 'Stone', value: 'stone' },
-                    { title: 'Gray', value: 'gray' },
-                    { title: 'Zinc', value: 'zinc' },
-                ],
-                initial: 0,
+                name: 'theme',
+                message: 'Which color would you like to use for the main theme?',
+                choices: themeChoices,
+                initial: (prev: string) => {
+                    const index = themeChoices.findIndex(c => c.value === prev);
+                    return index === -1 ? 0 : index;
+                },
             },
             {
                 type: 'text',
@@ -92,10 +133,11 @@ export async function init(options: InitOptions) {
 
         config = {
             $schema: 'https://shadcn-angular.dev/schema.json',
-            style: responses.style,
+            style: 'default',
             tailwind: {
                 css: responses.globalCss,
                 baseColor: responses.baseColor,
+                theme: responses.theme,
                 cssVariables: true,
             },
             aliases: {
@@ -133,7 +175,7 @@ export async function init(options: InitOptions) {
         const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
 
         // Write the tailwind.css file with all Tailwind directives
-        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor));
+        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor, config.tailwind.theme));
         spinner.text = 'Created tailwind.css';
 
         // Add import to the user's global styles file if not already present
@@ -182,6 +224,44 @@ export async function init(options: InitOptions) {
             await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
 
+        // Configure app.config.ts with Lucide icons
+        spinner.text = 'Configuring icons in app.config.ts...';
+        const appConfigPath = path.join(cwd, 'src/app/app.config.ts');
+
+        if (await fs.pathExists(appConfigPath)) {
+            let appConfigContent = await fs.readFile(appConfigPath, 'utf-8');
+
+            // Add imports
+            if (!appConfigContent.includes('LucideAngularModule')) {
+                const iconImports = "import { LucideAngularModule, ArrowDown, ArrowUp, ChevronsUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-angular';";
+                appConfigContent = iconImports + '\n' + appConfigContent;
+            }
+
+            if (!appConfigContent.includes('importProvidersFrom')) {
+                appConfigContent = "import { importProvidersFrom } from '@angular/core';\n" + appConfigContent;
+            }
+
+            // Add provider
+            const providerCode = `
+    importProvidersFrom(LucideAngularModule.pick({ 
+      ArrowDown, 
+      ArrowUp, 
+      ChevronsUpDown, 
+      ChevronLeft, 
+      ChevronRight, 
+      ChevronsLeft, 
+      ChevronsRight 
+    }))`;
+
+            if (!appConfigContent.includes('LucideAngularModule.pick')) {
+                appConfigContent = appConfigContent.replace(
+                    /providers:\s*\[/,
+                    `providers: [${providerCode},`
+                );
+                await fs.writeFile(appConfigPath, appConfigContent);
+            }
+        }
+
         spinner.succeed(chalk.green('Project initialized successfully!'));
 
         console.log('\n' + chalk.bold('Next steps:'));

package/src/index.ts

@@ -8,7 +8,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.8');
+    .version('0.0.10');
 
 program
     .command('init')