@sarthak_krishak/inkforge 0.2.1 → 0.3.0

package/Readme.md

@@ -9,7 +9,7 @@
 [![React](https://img.shields.io/badge/React-18%2B-61DAFB?style=flat-square&logo=react&logoColor=white)](https://react.dev)
 [![Ink](https://img.shields.io/badge/Ink-5%2B-000000?style=flat-square)](https://github.com/vadimdemedes/ink)
 
-**Beautiful terminal UI components for React/Ink — set up in 2 commands, owned forever.**
+**Beautiful terminal UI components for React/Ink — scaffolded in one command, owned forever.**
 
 *shadcn/ui for your terminal. Built for the AI coding agent era.*
 
@@ -19,83 +19,62 @@
 
 ## What is InkForge?
 
-InkForge gives you polished, production-ready terminal components — spinners, progress bars, and more — that you **actually own**. Instead of a locked npm dependency you can't touch, InkForge copies the source code directly into your project. Read it. Edit it. Make it yours.
-
-```bash
-npm install @sarthak_krishak/inkforge react ink vite-node vite @vitejs/plugin-react
-npx inkforge init
-npm start
-```
-
-That's the entire setup. Three commands. You're running.
+InkForge gives you polished, production-ready terminal components — spinners, progress bars, and more — that you **actually own**. Instead of a locked npm dependency buried in `node_modules`, InkForge copies the source code directly into your project. Read it. Edit it. Make it yours.
 
 ---
 
 ## Quick Start
 
-### Step 1 — Create a new folder and open a terminal inside it
+### Step 1 — Create a new empty folder and open a terminal inside it
 
 ```bash
 mkdir my-cli-app
 cd my-cli-app
 ```
 
-### Step 2 — Install InkForge and its dependencies
-
-```bash
-npm install @sarthak_krishak/inkforge react ink vite-node vite @vitejs/plugin-react
-```
-
-### Step 3 — Run init
+### Step 2 — Scaffold the project
 
 ```bash
-npx inkforge init
+npx @sarthak_krishak/inkforge init
 ```
 
-This one command automatically creates everything:
+This creates everything your project needs:
 
-| Created | What it does |
+| Created | Description |
 |---|---|
-| `package.json` | Configured with `type: module` and a `start` script |
+| `package.json` | Configured with `type: module`, `start` script, and all dependencies listed |
 | `vite.config.js` | Vite + React plugin config |
-| `app.jsx` | A working starter app with live examples |
-| `src/components/inkforge/Spinner/` | Spinner source — yours to own and edit |
-| `src/components/inkforge/ProgressBar/` | ProgressBar source — yours to own and edit |
-| `src/components/inkforge/core/colors.js` | Theme color system |
+| `app.jsx` | Starter app — edit this to build your CLI |
 
-### Step 4 — Start your app
+### Step 3 — Install dependencies
 
 ```bash
-npm start
+npm install
 ```
 
-You'll see animated spinners and a filling progress bar in your terminal immediately.
+### Step 4 — Add the components you want
 
----
+```bash
+npx inkforge add spinner
+npx inkforge add progressbar
+```
 
-## Project structure after init
+This copies the component source files directly into your project. You own them now.
 
+### Step 5 — Open `app.jsx`, import your components, and run
+
+```jsx
+import { Spinner }     from './src/components/inkforge/Spinner/index.jsx';
+import { ProgressBar } from './src/components/inkforge/ProgressBar/index.jsx';
 ```
-my-cli-app/
-├── src/
-│   └── components/
-│       └── inkforge/
-│           ├── Spinner/
-│           │   └── index.jsx       ← edit freely
-│           ├── ProgressBar/
-│           │   └── index.jsx       ← edit freely
-│           └── core/
-│               └── colors.js       ← theme colors
-├── app.jsx                         ← your app starts here
-├── vite.config.js
-└── package.json
+
+```bash
+npm start
 ```
 
 ---
 
-## Using components in your app
-
-Open `app.jsx` and build from there. The import paths are set up automatically:
+## Full example `app.jsx`
 
 ```jsx
 import React, { useState, useEffect } from 'react';
@@ -120,8 +99,10 @@ function App() {
   return (
     <Box flexDirection="column" padding={1} gap={1}>
       <Text bold color="cyan">My CLI App</Text>
-      <Spinner label="Building..." done={done} doneText="✓ Build complete!" />
-      <ProgressBar value={progress} label="Progress" />
+      <Spinner label="Building..."  done={done} doneText="✓ Build complete!"  />
+      <Spinner label="Installing..." done={done} doneText="✓ Packages ready!" variant="bounce" theme="cyberpunk" />
+      <ProgressBar value={progress} label="Progress " />
+      <ProgressBar value={progress} label="Memory   " variant="block" color="#E5C07B" />
     </Box>
   );
 }
@@ -131,6 +112,26 @@ render(<App />);
 
 ---
 
+## Project structure after setup
+
+```
+my-cli-app/
+├── src/
+│   └── components/
+│       └── inkforge/
+│           ├── Spinner/
+│           │   └── index.jsx       ← edit freely
+│           ├── ProgressBar/
+│           │   └── index.jsx       ← edit freely
+│           └── core/
+│               └── colors.js       ← theme colors
+├── app.jsx                         ← your app starts here
+├── vite.config.js
+└── package.json
+```
+
+---
+
 ## Components
 
 ### Spinner
@@ -138,19 +139,14 @@ render(<App />);
 Animated loading indicator with 5 variants and a done state.
 
 ```jsx
-// Variants
 <Spinner variant="dots"   label="Fetching data..."      />
 <Spinner variant="bounce" label="Processing request..."  theme="cyberpunk" />
 <Spinner variant="arc"    label="Compiling..."           />
 <Spinner variant="line"   label="Connecting..."          />
 <Spinner variant="simple" label="Waiting..."             />
 
-// Done state — switches to a completion message automatically
-<Spinner
-  label="Deploying to production..."
-  done={isDone}
-  doneText="✓ Deployed successfully!"
-/>
+// Switches to a completion message when done={true}
+<Spinner label="Deploying..." done={isDone} doneText="✓ Deployed!" />
 ```
 
 #### Spinner Props
@@ -158,11 +154,11 @@ Animated loading indicator with 5 variants and a done state.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `variant` | `string` | `'dots'` | Animation style: `dots` `line` `bounce` `arc` `simple` |
-| `label` | `string` | `'Loading...'` | Text displayed next to the spinner |
-| `color` | `string` | theme primary | Override spinner color (any hex value) |
+| `label` | `string` | `'Loading...'` | Text shown next to the spinner |
+| `color` | `string` | theme primary | Spinner color (any hex value) |
 | `theme` | `string` | `'default'` | Color theme: `'default'` or `'cyberpunk'` |
-| `interval` | `number` | `120` | Animation frame speed in milliseconds |
-| `done` | `boolean` | `false` | When `true`, switches to the done state |
+| `interval` | `number` | `120` | Animation speed in milliseconds |
+| `done` | `boolean` | `false` | When `true`, switches to done state |
 | `doneText` | `string` | `'✓ Done'` | Message shown when `done` is `true` |
 
 ---
@@ -172,22 +168,12 @@ Animated loading indicator with 5 variants and a done state.
 Fillable progress bar with 3 visual styles.
 
 ```jsx
-// Basic usage
 <ProgressBar value={75} label="Build" />
-
-// Show raw value instead of percentage
-<ProgressBar value={45} total={200} label="Files processed" showValue />
-
-// Visual variants
-<ProgressBar value={progress} variant="default" label="Download  " />
-<ProgressBar value={progress} variant="thin"    label="Upload    " />
-<ProgressBar value={progress} variant="block"   label="Memory    " />
-
-// Custom color
-<ProgressBar value={progress} color="#E5C07B" label="CPU usage" />
-
-// Cyberpunk theme
-<ProgressBar value={progress} theme="cyberpunk" label="Hack      " />
+<ProgressBar value={45} total={200} label="Files" showValue />
+<ProgressBar value={progress} variant="thin"  label="Upload" />
+<ProgressBar value={progress} variant="block" label="Memory" />
+<ProgressBar value={progress} color="#E5C07B" label="CPU"    />
+<ProgressBar value={progress} theme="cyberpunk" label="Hack" />
 ```
 
 #### ProgressBar Props
@@ -196,7 +182,7 @@ Fillable progress bar with 3 visual styles.
 |---|---|---|---|
 | `value` | `number` | `0` | Current progress value |
 | `total` | `number` | `100` | Maximum value |
-| `width` | `number` | `30` | Bar width in terminal characters |
+| `width` | `number` | `30` | Bar width in characters |
 | `label` | `string` | `''` | Label shown before the bar |
 | `showPercent` | `boolean` | `true` | Show percentage on the right |
 | `showValue` | `boolean` | `false` | Show `value/total` instead of percentage |
@@ -209,30 +195,28 @@ Fillable progress bar with 3 visual styles.
 
 ## Themes
 
-All components support two built-in themes via the `theme` prop:
-
-| Theme | Colors | Best for |
+| Theme | Accent | Best for |
 |---|---|---|
-| `default` | Blue accent, green fill, gray empty | Production tools, professional CLIs |
-| `cyberpunk` | Neon cyan, bright green, dark muted | Dev tools, personal projects, AI agents |
+| `default` | Blue / green | Production tools, professional CLIs |
+| `cyberpunk` | Neon cyan / bright green | Dev tools, personal projects, AI agents |
 
 ---
 
-## CLI Commands
+## CLI Reference
 
 ```bash
-# Set up a new project from scratch (run once after install)
-npx inkforge init
+# Scaffold a new project in an empty folder (run once)
+npx @sarthak_krishak/inkforge init
 
-# Add a specific component to an existing project
+# Add components to your project
 npx inkforge add spinner
 npx inkforge add progressbar
 npx inkforge add spinner progressbar
 
-# Interactive component selector (arrow keys + space to pick)
+# Interactive component picker (arrow keys + space)
 npx inkforge add
 
-# List all available components
+# See all available components
 npx inkforge list
 ```
 
@@ -240,11 +224,11 @@ npx inkforge list
 
 ## Why own your components?
 
-With a standard npm package, the code lives locked inside `node_modules`. You can't edit it without forking the whole repo.
+With a standard npm package, the code is locked inside `node_modules`. You can't change it without forking the entire repo.
 
-With InkForge, after running `npx inkforge add spinner`, the file lives at `src/components/inkforge/Spinner/index.jsx` — inside **your** project. Open it, change the animation frames, add a new variant, tweak the colors. No fork needed. No PR required. It's your code now.
+With InkForge, after `npx inkforge add spinner`, the file is at `src/components/inkforge/Spinner/index.jsx` — inside **your** project. Change the animation frames. Add a new variant. Tweak the colors. No fork needed. No PR required. It's your code.
 
-This is the same philosophy that made [shadcn/ui](https://ui.shadcn.com) popular for web development. InkForge brings it to the terminal.
+This is the same philosophy that made [shadcn/ui](https://ui.shadcn.com) the most popular component library for web React. InkForge brings it to the terminal.
 
 ---
 
@@ -252,16 +236,29 @@ This is the same philosophy that made [shadcn/ui](https://ui.shadcn.com) popular
 
 - [x] Spinner — 5 variants, done state, theme support
 - [x] ProgressBar — 3 variants, custom colors, theme support
-- [x] CLI installer — `init`, `add`, `list` commands
+- [x] CLI — `init`, `add`, `list` commands
 - [ ] DiffViewer — git-style diff display for AI coding agents
-- [ ] StreamingOutput — token-by-token streaming display
+- [ ] StreamingOutput — token-by-token AI response display
 - [ ] PromptInput — input with history and autocomplete
 - [ ] Select / MultiSelect — keyboard-navigable menus
 - [ ] Table — structured data display
-- [ ] StatusBar — footer with agent state and metrics
+- [ ] StatusBar — footer with agent state
+
+---
+
+## Contributing
+
+PRs and issues welcome. Open an issue first to discuss new components.
+
+```bash
+git clone https://github.com/sarthak-krishak/inkforge
+cd inkforge
+npm install
+npm run demo
+```
 
 ---
 
 ## License
 
-MIT © [Sarthak Krishak](https://github.com/SarthakKrishak)
+MIT © [Sarthak Krishak](https://github.com/sarthak-krishak)

package/cli/index.js

@@ -1,417 +1,339 @@
 #!/usr/bin/env node
 
-import { program } from "commander";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import readline from "readline";
+import { program } from 'commander';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import readline from 'readline';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// ── Color helpers ─────────────────────────────────────────────────────────────
 const c = {
-  cyan: (s) => `\x1b[36m${s}\x1b[0m`,
-  green: (s) => `\x1b[32m${s}\x1b[0m`,
-  yellow: (s) => `\x1b[33m${s}\x1b[0m`,
-  red: (s) => `\x1b[31m${s}\x1b[0m`,
-  bold: (s) => `\x1b[1m${s}\x1b[0m`,
-  dim: (s) => `\x1b[2m${s}\x1b[0m`,
+  cyan:   s => `\x1b[36m${s}\x1b[0m`,
+  green:  s => `\x1b[32m${s}\x1b[0m`,
+  yellow: s => `\x1b[33m${s}\x1b[0m`,
+  red:    s => `\x1b[31m${s}\x1b[0m`,
+  bold:   s => `\x1b[1m${s}\x1b[0m`,
+  dim:    s => `\x1b[2m${s}\x1b[0m`,
 };
 
+// ── Component registry ────────────────────────────────────────────────────────
 const REGISTRY = {
   spinner: {
-    name: "Spinner",
-    description: "Animated loading spinner with 5 variants",
-    file: "Spinner/index.jsx",
-    dir: "Spinner",
-    usage: '<Spinner variant="dots" label="Loading..." />',
+    name:        'Spinner',
+    description: 'Animated loading spinner with 5 variants',
+    file:        'Spinner/index.jsx',
+    dir:         'Spinner',
+    usage:       '<Spinner variant="dots" label="Loading..." />',
   },
   progressbar: {
-    name: "ProgressBar",
-    description: "Fillable progress bar with 3 variants",
-    file: "ProgressBar/index.jsx",
-    dir: "ProgressBar",
-    usage: '<ProgressBar value={60} label="Build" />',
+    name:        'ProgressBar',
+    description: 'Fillable progress bar with 3 variants',
+    file:        'ProgressBar/index.jsx',
+    dir:         'ProgressBar',
+    usage:       '<ProgressBar value={60} label="Build" />',
   },
 };
 
-// ── Paths ─────────────────────────────────────────────────────────────────────
+// ── Path helpers ──────────────────────────────────────────────────────────────
 function getDestDir() {
   const cwd = process.cwd();
-  return fs.existsSync(path.join(cwd, "src"))
-    ? path.join(cwd, "src", "components", "inkforge")
-    : path.join(cwd, "components", "inkforge");
+  return fs.existsSync(path.join(cwd, 'src'))
+    ? path.join(cwd, 'src', 'components', 'inkforge')
+    : path.join(cwd, 'components', 'inkforge');
 }
 
 function getTemplatesDir() {
-  return path.join(__dirname, "..", "src", "components");
+  return path.join(__dirname, '..', 'src', 'components');
 }
 
 function ensureDir(p) {
   if (!fs.existsSync(p)) fs.mkdirSync(p, { recursive: true });
 }
 
+// ── Copy core/colors.js ───────────────────────────────────────────────────────
+function copyCore(destDir) {
+  const coreDir  = path.join(destDir, 'core');
+  const destFile = path.join(coreDir, 'colors.js');
+  if (fs.existsSync(destFile)) return;
+
+  const srcFile = path.join(__dirname, '..', 'src', 'core', 'colors.js');
+  if (!fs.existsSync(srcFile)) return;
+
+  ensureDir(coreDir);
+  fs.copyFileSync(srcFile, destFile);
+}
+
 // ── Copy one component ────────────────────────────────────────────────────────
 function copyComponent(key, silent = false) {
-  const entry = REGISTRY[key];
-  const destDir = getDestDir();
-  const srcFile = path.join(getTemplatesDir(), entry.file);
+  const entry      = REGISTRY[key];
+  const destDir    = getDestDir();
+  const srcFile    = path.join(getTemplatesDir(), entry.file);
   const destFolder = path.join(destDir, entry.dir);
-  const destFile = path.join(destFolder, "index.jsx");
+  const destFile   = path.join(destFolder, 'index.jsx');
 
   if (!fs.existsSync(srcFile)) {
-    console.log(c.red(`✗ Template not found for ${entry.name}.`));
+    console.log(c.red(`  ✗ Template not found for ${entry.name}. Try reinstalling inkforge.`));
     return false;
   }
 
-  if (fs.existsSync(destFile) && !silent) {
-    console.log(c.yellow(`⚠  ${entry.name} already exists — skipping.`));
+  if (fs.existsSync(destFile)) {
+    if (!silent) console.log(c.yellow(`  ⚠  ${entry.name} already exists — skipping.`));
     return false;
   }
 
   ensureDir(destFolder);
 
-  let src = fs.readFileSync(srcFile, "utf8");
+  let src = fs.readFileSync(srcFile, 'utf8');
   src = src.replace(
     /from ['"].*?core\/colors\.js['"]/,
-    `from '../core/colors.js'`,
+    `from '../core/colors.js'`
   );
-  fs.writeFileSync(destFile, src, "utf8");
+  fs.writeFileSync(destFile, src, 'utf8');
 
-  if (!silent) {
-    console.log(c.green(`  ✓ ${entry.name}`));
-  }
+  if (!silent) console.log(c.green(`  ✓ ${entry.name} added`));
   return true;
 }
 
-// ── Copy core/colors.js ───────────────────────────────────────────────────────
-function copyCore(destDir) {
-  const coreDir = path.join(destDir, "core");
-  const destFile = path.join(coreDir, "colors.js");
-  if (fs.existsSync(destFile)) return;
-
-  const srcFile = path.join(__dirname, "..", "src", "core", "colors.js");
-  if (!fs.existsSync(srcFile)) return;
-
-  ensureDir(coreDir);
-  fs.copyFileSync(srcFile, destFile);
-}
-
-// ── Write vite.config.js ──────────────────────────────────────────────────────
-function writeViteConfig() {
-  const dest = path.join(process.cwd(), "vite.config.js");
-  if (fs.existsSync(dest)) return;
-  fs.writeFileSync(
-    dest,
-    `import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-export default defineConfig({ plugins: [react()] });
-`,
-  );
-  console.log(c.green("  ✓ vite.config.js"));
-}
-
-// ── Write starter app.jsx ─────────────────────────────────────────────────────
-function writeAppJsx() {
-  const dest = path.join(process.cwd(), "app.jsx");
-  if (fs.existsSync(dest)) {
-    console.log(c.dim("  ↷ app.jsx already exists — skipping"));
-    return;
-  }
-  fs.writeFileSync(
-    dest,
-    `import React, { useState, useEffect } from 'react';
-import { render, Box, Text } from 'ink';
-import { Spinner }     from './src/components/inkforge/Spinner/index.jsx';
-import { ProgressBar } from './src/components/inkforge/ProgressBar/index.jsx';
-
-function App() {
-  const [progress, setProgress] = useState(0);
-  const [done, setDone]         = useState(false);
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      setProgress(p => {
-        if (p >= 100) { clearInterval(t); setDone(true); return 100; }
-        return p + 5;
-      });
-    }, 150);
-    return () => clearInterval(t);
-  }, []);
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Text bold color="cyan">My CLI App</Text>
-      <Spinner label="Building..." done={done} doneText="✓ Done!" />
-      <ProgressBar value={progress} label="Progress" />
-    </Box>
-  );
-}
-
-render(<App />);
-`,
-  );
-  console.log(c.green("  ✓ app.jsx (starter file)"));
-}
-
-// ── Patch package.json with start script ──────────────────────────────────────
-function patchPackageJson() {
-  const pkgPath = path.join(process.cwd(), "package.json");
-  if (!fs.existsSync(pkgPath)) return;
-
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
-
-  let changed = false;
-
-  // Add "type": "module"
-  if (pkg.type !== "module") {
-    pkg.type = "module";
-    changed = true;
-  }
-
-  // Add start script
-  if (!pkg.scripts) pkg.scripts = {};
-  if (!pkg.scripts.start) {
-    pkg.scripts.start = "vite-node app.jsx";
-    changed = true;
-  }
-
-  if (changed) {
-    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
-    console.log(c.green("  ✓ package.json (added type:module + start script)"));
-  }
+// ── Print import + usage hint after adding ────────────────────────────────────
+function printUsageHint(keys) {
+  console.log(c.bold(c.green('\n  Components added! Use them in app.jsx:\n')));
+  console.log(c.dim('  // Add these imports at the top of app.jsx:'));
+  keys.forEach(key => {
+    const entry = REGISTRY[key];
+    if (!entry) return;
+    const importPath = `./src/components/inkforge/${entry.dir}/index.jsx`;
+    console.log(c.dim(`  import { ${entry.name} } from '${importPath}';`));
+  });
+  console.log('');
+  console.log(c.dim('  // Then use them in your JSX:'));
+  keys.forEach(key => {
+    const entry = REGISTRY[key];
+    if (!entry) return;
+    console.log(c.dim(`  ${entry.usage}`));
+  });
+  console.log(c.dim('\n  Then run: ') + c.cyan('npm start\n'));
 }
 
 // ── INIT command ──────────────────────────────────────────────────────────────
 function runInit() {
-  console.log(c.bold(c.cyan("\n  InkForge — initializing your project\n")));
-
-  const cwd = process.cwd();
-  const destDir = getDestDir();
-  const pkgPath = path.join(cwd, "package.json");
+  console.log(c.bold(c.cyan('\n  InkForge — initializing your project\n')));
+
+  const cwd     = process.cwd();
+  const pkgPath = path.join(cwd, 'package.json');
+
+  // Step 1: Create package.json with all dependencies listed
+  const folderName = path.basename(cwd);
+  const pkg = {
+    name:    folderName,
+    version: '1.0.0',
+    type:    'module',
+    scripts: {
+      start: 'vite-node app.jsx',
+    },
+    dependencies: {
+      '@sarthak_krishak/inkforge': 'latest',
+      ink:                         '^5.0.0',
+      react:                       '^18.3.0',
+    },
+    devDependencies: {
+      '@vitejs/plugin-react': '^4.3.0',
+      vite:                   '^5.4.0',
+      'vite-node':            '^2.1.0',
+    },
+  };
 
-  // ── Step 1: Create package.json if it doesn't exist ──────────────────────
   if (!fs.existsSync(pkgPath)) {
-    const folderName = path.basename(cwd);
-    const pkg = {
-      name: folderName,
-      version: "1.0.0",
-      type: "module",
-      scripts: {
-        start: "vite-node app.jsx",
-      },
-    };
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
-    console.log(c.green("  ✓ package.json created"));
+    console.log(c.green('  ✓ package.json created'));
   } else {
-    // patch existing one
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    const existing = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
     let changed = false;
-    if (pkg.type !== "module") {
-      pkg.type = "module";
-      changed = true;
-    }
-    if (!pkg.scripts) {
-      pkg.scripts = {};
-    }
-    if (!pkg.scripts.start) {
-      pkg.scripts.start = "vite-node app.jsx";
-      changed = true;
-    }
+    if (existing.type !== 'module')  { existing.type = 'module'; changed = true; }
+    if (!existing.scripts)           { existing.scripts = {}; }
+    if (!existing.scripts.start)     { existing.scripts.start = 'vite-node app.jsx'; changed = true; }
     if (changed) {
-      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
-      console.log(c.green("  ✓ package.json updated"));
+      fs.writeFileSync(pkgPath, JSON.stringify(existing, null, 2));
+      console.log(c.green('  ✓ package.json updated'));
     } else {
-      console.log(c.dim("  ↷ package.json already configured"));
+      console.log(c.dim('  ↷ package.json already configured'));
     }
   }
 
-  // ── Step 2: Create vite.config.js ────────────────────────────────────────
-  const vitePath = path.join(cwd, "vite.config.js");
+  // Step 2: Create vite.config.js
+  const vitePath = path.join(cwd, 'vite.config.js');
   if (!fs.existsSync(vitePath)) {
-    fs.writeFileSync(
-      vitePath,
-      `import { defineConfig } from 'vite';
+    fs.writeFileSync(vitePath,
+`import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 export default defineConfig({ plugins: [react()] });
-`,
-    );
-    console.log(c.green("  ✓ vite.config.js created"));
+`);
+    console.log(c.green('  ✓ vite.config.js created'));
   } else {
-    console.log(c.dim("  ↷ vite.config.js already exists"));
+    console.log(c.dim('  ↷ vite.config.js already exists'));
   }
 
-  // ── Step 3: Copy all components ───────────────────────────────────────────
-  ensureDir(destDir);
-  Object.keys(REGISTRY).forEach((key) => copyComponent(key, true));
-  copyCore(destDir);
-  console.log(c.green("  ✓ Spinner component added"));
-  console.log(c.green("  ✓ ProgressBar component added"));
-  console.log(c.green("  ✓ core/colors.js added"));
-
-  // ── Step 4: Create app.jsx ────────────────────────────────────────────────
-  const appPath = path.join(cwd, "app.jsx");
+  // Step 3: Create starter app.jsx — no components imported yet
+  const appPath = path.join(cwd, 'app.jsx');
   if (!fs.existsSync(appPath)) {
-    fs.writeFileSync(
-      appPath,
-      `import React, { useState, useEffect } from 'react';
+    fs.writeFileSync(appPath,
+`import React from 'react';
 import { render, Box, Text } from 'ink';
-import { Spinner }     from './src/components/inkforge/Spinner/index.jsx';
-import { ProgressBar } from './src/components/inkforge/ProgressBar/index.jsx';
 
-function App() {
-  const [progress, setProgress] = useState(0);
-  const [done, setDone]         = useState(false);
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      setProgress(p => {
-        if (p >= 100) { clearInterval(t); setDone(true); return 100; }
-        return p + 5;
-      });
-    }, 150);
-    return () => clearInterval(t);
-  }, []);
+// Add components first, then import them here:
+//
+//   npx inkforge add spinner
+//   npx inkforge add progressbar
+//
+// import { Spinner }     from './src/components/inkforge/Spinner/index.jsx';
+// import { ProgressBar } from './src/components/inkforge/ProgressBar/index.jsx';
 
+function App() {
   return (
     <Box flexDirection="column" padding={1} gap={1}>
       <Text bold color="cyan">My CLI App</Text>
-      <Spinner label="Building..."  done={done} doneText="✓ Build complete!" />
-      <Spinner label="Installing..." done={done} doneText="✓ Packages ready!" variant="bounce" theme="cyberpunk" />
-      <ProgressBar value={progress} label="Progress " />
-      <ProgressBar value={progress} label="Memory   " variant="block" color="#E5C07B" />
+      <Text dimColor>Add components by running:</Text>
+      <Text dimColor>  npx inkforge add spinner</Text>
+      <Text dimColor>  npx inkforge add progressbar</Text>
     </Box>
   );
 }
 
 render(<App />);
-`,
-    );
-    console.log(c.green("  ✓ app.jsx created"));
+`);
+    console.log(c.green('  ✓ app.jsx created'));
   } else {
-    console.log(c.dim("  ↷ app.jsx already exists — skipping"));
+    console.log(c.dim('  ↷ app.jsx already exists'));
   }
 
-  // ── Done ──────────────────────────────────────────────────────────────────
-  console.log(c.bold(c.green("\n  Everything is ready!\n")));
-  console.log("  Run your app:");
-  console.log(c.bold(c.cyan("\n  npm start\n")));
+  // Done — print next steps
+  console.log(c.bold(c.green('\n  Project scaffolded!\n')));
+  console.log('  Next steps:\n');
+  console.log('  ' + c.cyan('npm install'));
+  console.log(c.dim('    installs all dependencies\n'));
+  console.log('  ' + c.cyan('npx inkforge add spinner'));
+  console.log(c.dim('    adds the Spinner component\n'));
+  console.log('  ' + c.cyan('npx inkforge add progressbar'));
+  console.log(c.dim('    adds the ProgressBar component\n'));
+  console.log('  ' + c.cyan('npm start'));
+  console.log(c.dim('    runs your app\n'));
 }
 
-// ── Interactive selector for `add` ────────────────────────────────────────────
+// ── Interactive selector ──────────────────────────────────────────────────────
 async function interactiveSelect() {
-  const keys = Object.keys(REGISTRY);
-  const entries = keys.map((k) => REGISTRY[k]);
-  let cursor = 0;
+  const keys     = Object.keys(REGISTRY);
+  const entries  = keys.map(k => REGISTRY[k]);
+  let   cursor   = 0;
   const selected = new Set();
 
-  process.stdout.write("\x1b[?25l");
+  process.stdout.write('\x1b[?25l');
   readline.emitKeypressEvents(process.stdin);
   if (process.stdin.isTTY) process.stdin.setRawMode(true);
 
-  function render() {
+  function renderMenu() {
     process.stdout.write(`\x1b[${entries.length + 4}A\x1b[0J`);
-    console.log(c.bold("\n  Select components to add:\n"));
+    console.log(c.bold('\n  Select components to add:\n'));
     entries.forEach((e, i) => {
-      const checked = selected.has(keys[i]) ? c.green("◉") : c.dim("○");
-      const active = i === cursor ? c.cyan("▶ ") : "  ";
-      const name = i === cursor ? c.bold(c.cyan(e.name)) : e.name;
-      console.log(
-        `  ${active}${checked}  ${name.padEnd(18)}${c.dim(e.description)}`,
-      );
+      const checked = selected.has(keys[i]) ? c.green('◉') : c.dim('○');
+      const active  = i === cursor ? c.cyan('▶ ') : '  ';
+      const name    = i === cursor ? c.bold(c.cyan(e.name)) : e.name;
+      console.log(`  ${active}${checked}  ${name.padEnd(18)}${c.dim(e.description)}`);
     });
-    console.log(c.dim("\n  ↑↓ move  space select  enter confirm  q quit"));
+    console.log(c.dim('\n  ↑↓ move  space select  enter confirm  q quit'));
   }
 
-  console.log("\n");
-  entries.forEach(() => console.log(""));
-  console.log("\n");
-  render();
+  console.log('\n');
+  entries.forEach(() => console.log(''));
+  console.log('\n');
+  renderMenu();
 
-  return new Promise((resolve) => {
-    process.stdin.on("keypress", (str, key) => {
+  return new Promise(resolve => {
+    process.stdin.on('keypress', (str, key) => {
       if (!key) return;
-      if (key.name === "up") cursor = (cursor - 1 + keys.length) % keys.length;
-      if (key.name === "down") cursor = (cursor + 1) % keys.length;
-      if (key.name === "space") {
+      if (key.name === 'up')    cursor = (cursor - 1 + keys.length) % keys.length;
+      if (key.name === 'down')  cursor = (cursor + 1) % keys.length;
+      if (key.name === 'space') {
         if (selected.has(keys[cursor])) selected.delete(keys[cursor]);
         else selected.add(keys[cursor]);
       }
-      if (key.name === "return") {
-        cleanup();
-        resolve([...selected]);
-      }
-      if (key.name === "q" || (key.ctrl && key.name === "c")) {
+      if (key.name === 'return') { cleanup(); resolve([...selected]); }
+      if (key.name === 'q' || (key.ctrl && key.name === 'c')) {
         cleanup();
-        console.log(c.dim("\n  Cancelled.\n"));
+        console.log(c.dim('\n  Cancelled.\n'));
         resolve([]);
       }
-      render();
+      renderMenu();
     });
   });
 
   function cleanup() {
     if (process.stdin.isTTY) process.stdin.setRawMode(false);
     process.stdin.pause();
-    process.stdout.write("\x1b[?25h");
+    process.stdout.write('\x1b[?25h');
   }
 }
 
 // ── Commands ──────────────────────────────────────────────────────────────────
+
 program
-  .name("inkforge")
-  .description("InkForge — beautiful terminal UI components for React/Ink")
-  .version("0.1.0");
+  .name('inkforge')
+  .description('InkForge — beautiful terminal UI components for React/Ink')
+  .version('0.1.0');
 
+// inkforge init
 program
-  .command("init")
-  .description(
-    "Set up InkForge in your project — run this once after installing",
-  )
+  .command('init')
+  .description('Scaffold a new InkForge project — run this once in an empty folder')
   .action(runInit);
 
+// inkforge list
 program
-  .command("list")
-  .description("List all available components")
+  .command('list')
+  .description('List all available components')
   .action(() => {
-    console.log(c.bold("\n  InkForge Components\n"));
+    console.log(c.bold('\n  InkForge — available components\n'));
     Object.entries(REGISTRY).forEach(([key, entry]) => {
-      console.log(
-        `  ${c.cyan(entry.name.padEnd(16))} ${c.dim(entry.description)}`,
-      );
+      console.log(`  ${c.cyan(entry.name.padEnd(16))} ${c.dim(entry.description)}`);
       console.log(c.dim(`  npx inkforge add ${key}\n`));
     });
   });
 
+// inkforge add [components...]
 program
-  .command("add [components...]")
-  .description("Add a specific component to your project")
+  .command('add [components...]')
+  .description('Add one or more components to your project')
   .action(async (components) => {
-    console.log(c.bold(c.cyan("\n  InkForge\n")));
+    console.log(c.bold(c.cyan('\n  InkForge\n')));
 
+    // No args — show interactive selector
     if (!components || components.length === 0) {
       const chosen = await interactiveSelect();
       if (chosen.length === 0) return;
-      console.log("");
-      chosen.forEach((key) => copyComponent(key));
+      console.log('');
+      chosen.forEach(key => copyComponent(key));
       copyCore(getDestDir());
+      printUsageHint(chosen);
       return;
     }
 
+    // Args provided — add directly
+    const added = [];
     for (const name of components) {
-      const key = name.toLowerCase().replace(/[^a-z]/g, "");
+      const key = name.toLowerCase().replace(/[^a-z]/g, '');
       if (!REGISTRY[key]) {
-        console.log(c.red(`✗ Unknown component: "${name}"`));
-        console.log(
-          c.dim(`  Run npx inkforge list to see available components.\n`),
-        );
+        console.log(c.red(`  ✗ Unknown component: "${name}"`));
+        console.log(c.dim(`    Run ${c.cyan('npx inkforge list')} to see available components.\n`));
         continue;
       }
-      copyComponent(key);
+      const ok = copyComponent(key);
+      if (ok) added.push(key);
+    }
+
+    if (added.length > 0) {
+      copyCore(getDestDir());
+      printUsageHint(added);
     }
-    copyCore(getDestDir());
-    console.log(
-      c.green(c.bold("\n  Done! Components are yours to own and edit.\n")),
-    );
   });
 
-program.parse();
+program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarthak_krishak/inkforge",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Beautiful terminal UI components for React/Ink — shadcn/ui for your terminal",
   "type": "module",
   "main": "src/index.jsx",