rizzo-css 0.0.62 → 0.0.63

package/README.md

@@ -1,6 +1,6 @@
 # rizzo-css
 
-A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). **The same CSS and component styles** ship for every option: **Vanilla JS**, Astro, and Svelte. Framework-agnostic: use with any stack or plain HTML.
+A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). **The same CSS and component styles** ship for every option: **Vanilla JS**, Astro, Svelte, React, and Vue. Framework-agnostic: use with any stack or plain HTML.
 
 ## Install
 
@@ -16,7 +16,7 @@ bun add rizzo-css
 
 The package works with **npm**, **pnpm**, **yarn**, and **bun**. After install, run the CLI with your manager’s runner: `npx` (npm/yarn), `pnpm dlx`, or `bunx`.
 
-**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, or Svelte), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 56 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, Svelte, React, or Vue), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 56 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte|react|vue --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -42,6 +42,8 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 | **Vanilla** | `npm install rizzo-css` or CDN | Link `node_modules/rizzo-css/dist/rizzo.min.css` or use CDN (see below) | None; write HTML with the same BEM classes as the docs |
 | **Astro** | `npm install rizzo-css` | `import 'rizzo-css'` in layout or link from `public/` | Copy components from `node_modules/rizzo-css/scaffold/astro/` or use `npx rizzo-css add` with components |
 | **Svelte** | `npm install rizzo-css` | `import 'rizzo-css'` in root layout or link from `static/` | Copy components from `node_modules/rizzo-css/scaffold/svelte/` or use `npx rizzo-css add` with components |
+| **React** | `npm install rizzo-css` | `import 'rizzo-css'` in root or link from `public/` | Copy components from `node_modules/rizzo-css/scaffold/react/` or use `npx rizzo-css add` with components |
+| **Vue** | `npm install rizzo-css` | `import 'rizzo-css'` in main entry or link from `public/` | Copy components from `node_modules/rizzo-css/scaffold/vue/` or use `npx rizzo-css add` with components |
 
 **CSS paths (CLI and scaffolds):**
 
@@ -50,10 +52,12 @@ You install **the same package** for every framework: `npm install rizzo-css`. N
 | **Vanilla** | `css/rizzo.min.css` (project root) | `css/rizzo.min.css` (relative) |
 | **Astro** | `public/css/rizzo.min.css` | `/css/rizzo.min.css` (Astro serves `public/` at `/`) |
 | **Svelte** | `static/css/rizzo.min.css` | `/css/rizzo.min.css` (SvelteKit serves `static/` at `/`) |
+| **React** | `public/css/rizzo.min.css` (or Vite `index.html` link) | `/css/rizzo.min.css` or import in entry |
+| **Vue** | `public/css/rizzo.min.css` (or Vite link) | `/css/rizzo.min.css` or import in main |
 
 With `npx rizzo-css add --path <dir>`, the CLI still suggests the correct href for your framework (e.g. Astro/Svelte get a leading `/` path).
 
-Scaffolds in the package: `scaffold/vanilla/` (and `scaffold/vanilla/variants/docs`, `dashboard`, `full`), `scaffold/astro/base/` and `scaffold/astro/variants/` (docs, dashboard, full), `scaffold/svelte/base/` and `scaffold/svelte/variants/`, plus `scaffold/astro/` and `scaffold/svelte/` (all components), and `scaffold/config/` (font pairs for Settings). **Every framework gets the same four templates:** **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all or pick). Full = site clone (all components). **We never overwrite your existing files**; skipped content goes in **RIZZO-SETUP.md**. You must add the stylesheet `<link>` yourself (CLI prints the exact tag). Every scaffold includes LICENSE-RIZZO, README-RIZZO.md, and .gitignore; Astro/Svelte include package.json and .env.example.
+Scaffolds in the package: `scaffold/vanilla/` (and variants), `scaffold/astro/`, `scaffold/svelte/`, `scaffold/react/`, `scaffold/vue/` (base + variants; all components), and `scaffold/config/` (font pairs for Settings). **Every framework gets the same four templates:** **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all or pick). Full = site clone (all components). **We never overwrite your existing files**; skipped content goes in **RIZZO-SETUP.md**. You must add the stylesheet `<link>` yourself (CLI prints the exact tag). Every scaffold includes LICENSE-RIZZO, README-RIZZO.md, and .gitignore; Astro/Svelte include package.json and .env.example.
 
 ## Use
 
@@ -68,7 +72,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.62 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.63 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->
@@ -77,7 +81,7 @@ import 'rizzo-css';
 
 Short URLs also work: `https://unpkg.com/rizzo-css@latest` and `https://cdn.jsdelivr.net/npm/rizzo-css@latest` (CDNs serve the default file from package.json). To verify after publish: open the URL in a browser or run `curl -I https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css` and expect `200 OK`.
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; choose **Full** to add framework component files via the component picker. Each scaffold has README-RIZZO.md; every install includes LICENSE-RIZZO. The **Navbar** in every scaffold uses **flat links** (Docs, Components, Blocks, Themes, Colors), default Cat logo in the brand link (optional `logo` prop for a custom image), Search, and Settings. The **Vanilla** Full template includes the same navbar (from shared snippet), Settings panel, and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, Svelte, React, and Vue all use the same CSS and BEM markup; choose **Full** to add framework component files via the component picker. Each scaffold has README-RIZZO.md; every install includes LICENSE-RIZZO. The **Navbar** in every scaffold uses **flat links** (Docs, Components, Blocks, Themes, Colors), default Cat logo in the brand link (optional `logo` prop for a custom image), Search, and Settings. The **Vanilla** Full template includes the same navbar (from shared snippet), Settings panel, and toast; **Astro** and **Svelte** Full scaffolds include theme persistence and toast (`showToast`, `removeToast`, `removeAllToasts`).
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -18,7 +18,7 @@ const CLI_BANNER = `      /\\___/\\
 |_| \\_\\___/____/____\\___/   \\____|____/____/
 
 
-  Design system · Vanilla · Astro · Svelte`;
+  Design system · Vanilla · Astro · Svelte · React · Vue`;
 
 /** Rainbow theme colors for "RIZZOCSS" block (from our themes: red → orange → yellow → green → blue → purple → pink). */
 const BANNER_RAINBOW = [
@@ -79,7 +79,7 @@ const RIZZO_SNIPPET_FILE = 'RIZZO-SNIPPET.txt';
 const RIZZO_SETUP_FILE = 'RIZZO-SETUP.md';
 
 const COMMANDS = ['init', 'add', 'theme', 'doctor', 'help'];
-const FRAMEWORKS = ['vanilla', 'astro', 'svelte'];
+const FRAMEWORKS = ['vanilla', 'astro', 'svelte', 'react', 'vue'];
 /** Supported package managers: detection, install/add commands, and --package-manager override. */
 const VALID_PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
 
@@ -95,7 +95,7 @@ const TEMPLATES = [
 /** Build RIZZO-SETUP.md content: instructions + snippets. Never overwrites; use for landing or when files were skipped. */
 function buildRizzoSetupMd(framework, opts) {
   const { linkTag, linkHref, theme, defaultDark, defaultLight, skippedFiles = [], exampleMinimalPage } = opts;
-  const fw = framework === 'vanilla' ? 'Vanilla' : framework === 'astro' ? 'Astro' : 'Svelte';
+  const fw = framework === 'vanilla' ? 'Vanilla' : framework === 'astro' ? 'Astro' : framework === 'svelte' ? 'Svelte' : framework === 'react' ? 'React' : 'Vue';
   let md = `# Rizzo CSS setup
 
 This file was generated by \`npx rizzo-css init\` or \`npx rizzo-css add\`. Use it to integrate Rizzo CSS into your project. **We never overwrite your existing files** — add the snippets below where needed.
@@ -213,6 +213,8 @@ const ASTRO_COMPONENTS = [
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
+const REACT_COMPONENTS = [...ASTRO_COMPONENTS];
+const VUE_COMPONENTS = [...ASTRO_COMPONENTS];
 
 // Base set for Manual: all interactive components we ship (so manual has a full working set). Full includes everything (same list).
 const RECOMMENDED_COMPONENTS = [
@@ -233,6 +235,8 @@ const VANILLA_JS_COMPONENTS = ['Modal', 'Dropdown', 'Tabs', 'Toast', 'ThemeSwitc
 const COMPONENT_DEPS = {
   astro: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
   svelte: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  react: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
+  vue: { Settings: ['ThemeSwitcher', 'FontSwitcher', 'SoundEffects'], Toast: ['Alert'], Navbar: ['Search', 'Settings'] },
 };
 
 function getComponentDeps(framework, componentName) {
@@ -303,6 +307,8 @@ const C = {
   vanilla: '\u001b[38;5;226m', // Vanilla JS yellow
   astro: '\u001b[38;5;208m',   // Astro orange #ff5d01
   svelte: '\u001b[38;5;202m',  // Svelte orange #ff3e00
+  react: '\u001b[38;5;39m',    // React blue
+  vue: '\u001b[38;5;42m',     // Vue green
 };
 
 const CIRCLE_EMPTY = '\u25CB ';  // ○
@@ -1072,7 +1078,7 @@ function multiSelectMenu(options, title, initialSelected) {
 function printHelp() {
   console.log(getBanner());
   console.log(`
-rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte)
+rizzo-css CLI — Add Rizzo CSS to your project (Vanilla, Astro, Svelte, React, Vue)
 
 Available commands: init, add, theme, doctor, help
 
@@ -1098,7 +1104,7 @@ Commands:
 Options (init):
   --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: landing)
   --path <dir>      Project directory (relative to cwd or absolute). Scaffold and run install there. With --yes; interactive: "Enter path" option.
-  --framework <fw>  vanilla | astro | svelte (with --yes; otherwise first prompt)
+  --framework <fw>  vanilla | astro | svelte | react | vue (same 56 components each)
   --template <t>    create new: css-only | landing | docs | dashboard | full (default: landing). add: same options.
   --package-manager <pm>  npm | pnpm | yarn | bun (with --yes, or skip PM prompt when interactive)
   --install         After scaffolding, run package manager install in project directory (no prompt)
@@ -1110,7 +1116,7 @@ Options (init):
 Options (add) — run from your existing project root; you will choose a template then select components (or CSS only):
   --template <t>    css-only | landing | docs | dashboard | full (CSS only = stylesheet only; others = component picker)
   --path <dir>      Target directory for rizzo.min.css (overrides config and framework default)
-  --framework <fw>   vanilla | astro | svelte (overrides config and detection)
+  --framework <fw>   vanilla | astro | svelte | react | vue (overrides config and detection)
   --dry-run         Preview which files would be written without writing; show RIZZO-SETUP.md snippet for skipped files
   --package-manager <pm>  npm | pnpm | yarn | bun (override detection for install/print commands)
   --install-package  After copying CSS, run package manager add rizzo-css
@@ -1162,6 +1168,9 @@ Component dependencies (Full template):
   Some components require others to work. The component picker adds required ones automatically.
   Full list of available components and what relies on what: npx rizzo-css help components
 
+Frameworks:
+  Scaffolds (init/add): Vanilla, Astro, Svelte, React, Vue. Same 56 components in each framework’s syntax; same CSS and BEM. Docs: https://rizzo-css.vercel.app/docs/react and Vue.
+
 Docs: https://rizzo-css.vercel.app
 `);
 }
@@ -1177,7 +1186,7 @@ function printHelpComponents() {
   console.log(`
 Components — full list and what relies on what
 
-Available to pick (Astro & Svelte; same list):
+Available to pick (Astro, Svelte, React, Vue; same list):
   ` + line1 + (line2 ? ',\n  ' + line2 : '') + (line3 ? ',\n  ' + line3 : '') + `
 
 Dependencies (when you pick the component on the left, the right is added automatically):
@@ -1191,6 +1200,8 @@ Icons: copied whenever you add any component.
 Where components are copied:
   Astro   → src/components/rizzo/   (import from there)
   Svelte  → src/lib/rizzo/          (import from '$lib/rizzo')
+  React   → src/components/rizzo/   (import from there or @/components/rizzo)
+  Vue     → src/components/rizzo/   (import from there or @/components/rizzo)
   Vanilla → components/ (HTML)     (for interactivity add js/main.js; use --vanilla-js on add)
 
   Core   = all components above; dependencies are included so everything works.
@@ -1223,7 +1234,7 @@ function cmdDoctor() {
     const fw = config.framework || 'vanilla';
     const paths = getFrameworkCssPaths(fw);
     const targetDir = (config.targetDir || paths.targetDir);
-    const cssPath = fw === 'astro' ? join(cwd, 'public', 'css', 'rizzo.min.css') : fw === 'svelte' ? join(cwd, 'static', 'css', 'rizzo.min.css') : join(cwd, targetDir, 'rizzo.min.css');
+    const cssPath = (fw === 'astro' || fw === 'react' || fw === 'vue') ? join(cwd, 'public', 'css', 'rizzo.min.css') : fw === 'svelte' ? join(cwd, 'static', 'css', 'rizzo.min.css') : join(cwd, targetDir, 'rizzo.min.css');
     if (!existsSync(cssPath)) {
       console.log('  ✗ CSS not found at ' + cssPath);
       ok = false;
@@ -1243,7 +1254,7 @@ function cmdDoctor() {
         ok = false;
       }
     }
-    const fontsDir = fw === 'astro' ? join(cwd, 'public', 'assets', 'fonts') : fw === 'svelte' ? join(cwd, 'static', 'assets', 'fonts') : join(cwd, targetDir, 'fonts');
+    const fontsDir = (fw === 'astro' || fw === 'react' || fw === 'vue') ? join(cwd, 'public', 'assets', 'fonts') : fw === 'svelte' ? join(cwd, 'static', 'assets', 'fonts') : join(cwd, targetDir, 'fonts');
     if (!existsSync(fontsDir)) {
       console.log('  ? Fonts path not found: ' + pathRelative(cwd, fontsDir) + ' (CSS may reference ../assets/fonts/ or ./fonts/; add fonts if you use theme typography)');
     } else {
@@ -1259,7 +1270,7 @@ function cmdDoctor() {
         console.log('  ? Could not read fonts dir: ' + pathRelative(cwd, fontsDir));
       }
     }
-    const sfxDir = fw === 'astro' ? join(cwd, 'public', 'assets', 'sfx') : fw === 'svelte' ? join(cwd, 'static', 'assets', 'sfx') : join(cwd, 'assets', 'sfx');
+    const sfxDir = (fw === 'astro' || fw === 'react' || fw === 'vue') ? join(cwd, 'public', 'assets', 'sfx') : fw === 'svelte' ? join(cwd, 'static', 'assets', 'sfx') : join(cwd, 'assets', 'sfx');
     if (!existsSync(sfxDir)) {
       console.log('  ? Sound effects path not found: ' + pathRelative(cwd, sfxDir) + ' (optional; needed if you use Settings or SoundEffects with click sounds)');
     } else {
@@ -1272,7 +1283,7 @@ function cmdDoctor() {
         console.log('  ? Could not read sfx dir: ' + pathRelative(cwd, sfxDir));
       }
     }
-    const layoutPaths = fw === 'svelte' ? ['src/app.html'] : fw === 'astro' ? ['src/layouts/Layout.astro', 'src/layouts/BaseLayout.astro'] : [];
+    const layoutPaths = fw === 'svelte' ? ['src/app.html'] : fw === 'astro' ? ['src/layouts/Layout.astro', 'src/layouts/BaseLayout.astro'] : fw === 'react' ? ['index.html', 'src/main.tsx', 'src/main.jsx', 'src/App.tsx', 'src/App.jsx'] : fw === 'vue' ? ['index.html', 'src/main.ts', 'src/main.js', 'src/App.vue'] : [];
     for (const lp of layoutPaths) {
       const full = join(cwd, lp);
       if (existsSync(full)) {
@@ -1367,16 +1378,27 @@ async function promptComponentChoice(componentList, framework, initialSelection)
   );
 }
 
-/** Detect framework from cwd: "svelte" | "astro" | null. */
+/** Detect framework from cwd: "svelte" | "astro" | "react" | "vue" | null. */
 function detectFramework(cwd) {
   if (existsSync(join(cwd, 'svelte.config.js')) || existsSync(join(cwd, 'svelte.config.ts'))) return 'svelte';
   if (existsSync(join(cwd, 'astro.config.mjs')) || existsSync(join(cwd, 'astro.config.mts')) || existsSync(join(cwd, 'astro.config.js'))) return 'astro';
+  if (existsSync(join(cwd, 'vite.config.js')) || existsSync(join(cwd, 'vite.config.ts'))) {
+    try {
+      const pkg = readFileSync(join(cwd, 'package.json'), 'utf8');
+      const json = JSON.parse(pkg);
+      const deps = { ...json.dependencies, ...(json.devDependencies || {}) };
+      if (deps['vue']) return 'vue';
+      if (deps['react'] || deps['react-dom']) return 'react';
+    } catch (_) { /* ignore */ }
+  }
   try {
     const pkg = readFileSync(join(cwd, 'package.json'), 'utf8');
     const json = JSON.parse(pkg);
     const deps = { ...json.dependencies, ...(json.devDependencies || {}) };
     if (deps['@sveltejs/kit'] || deps['svelte']) return 'svelte';
     if (deps['astro']) return 'astro';
+    if (deps['vue']) return 'vue';
+    if (deps['react'] || deps['react-dom']) return 'react';
   } catch (_) { /* ignore */ }
   return null;
 }
@@ -1394,6 +1416,12 @@ function getFrameworkCssPaths(framework) {
   if (framework === 'astro') {
     return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
   }
+  if (framework === 'react') {
+    return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
+  }
+  if (framework === 'vue') {
+    return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css', fontsDir: 'public/assets/fonts', assetsRoot: 'public' };
+  }
   return { targetDir: 'css', linkHref: 'css/rizzo.min.css', fontsDir: 'css/fonts', assetsRoot: '' };
 }
 
@@ -1403,7 +1431,7 @@ function getFrameworkCssPaths(framework) {
  */
 function getLinkHrefForTargetDir(framework, targetDir) {
   const file = 'rizzo.min.css';
-  if (framework === 'astro' && targetDir) {
+  if ((framework === 'astro' || framework === 'react' || framework === 'vue') && targetDir) {
     const path = targetDir.replace(/^public\/?/, '').replace(/\/+$/, '') || 'css';
     return '/' + (path ? path + '/' : '') + file;
   }
@@ -1475,6 +1503,14 @@ function getScaffoldAstroDir() {
   return join(getPackageRoot(), 'scaffold', 'astro');
 }
 
+function getScaffoldReactDir() {
+  return join(getPackageRoot(), 'scaffold', 'react');
+}
+
+function getScaffoldVueDir() {
+  return join(getPackageRoot(), 'scaffold', 'vue');
+}
+
 function getScaffoldUtilsDir() {
   return join(getPackageRoot(), 'scaffold', 'utils');
 }
@@ -1634,6 +1670,17 @@ function copyRizzoIcons(projectDir, framework, opts) {
     }
     mkdirSync(targetDir, { recursive: true });
     copyDirRecursive(iconsSrc, targetDir);
+  } else if (framework === 'react' || framework === 'vue') {
+    const scaffoldDir = framework === 'react' ? getScaffoldReactDir() : getScaffoldVueDir();
+    const iconsSrc = join(scaffoldDir, 'icons');
+    if (!existsSync(iconsSrc)) return;
+    const targetDir = join(projectDir, 'src', 'components', 'rizzo', 'icons');
+    if (plan) {
+      collectIconPaths(iconsSrc, targetDir);
+      return;
+    }
+    mkdirSync(targetDir, { recursive: true });
+    copyDirRecursive(iconsSrc, targetDir);
   } else if (framework === 'vanilla') {
     const iconsSrc = getScaffoldVanillaIconsDir();
     if (!existsSync(iconsSrc)) return;
@@ -1906,6 +1953,139 @@ function copyAstroComponents(projectDir, selectedNames, opts) {
   }
 }
 
+function copyReactComponents(projectDir, selectedNames, opts) {
+  const scaffoldDir = getScaffoldReactDir();
+  if (!existsSync(scaffoldDir)) {
+    console.log('\n  React component templates not in this package; use CSS only or see docs.');
+    return;
+  }
+  const files = readdirSync(scaffoldDir).filter((f) => f.endsWith('.tsx') || f.endsWith('.jsx'));
+  const available = files.map((f) => f.replace(/\.(tsx|jsx)$/, ''));
+  const toCopy = selectedNames.filter((n) => n !== 'Icons' && available.includes(n));
+  const copyIconsOnly = selectedNames.includes('Icons') && toCopy.length === 0;
+  if (toCopy.length === 0 && !copyIconsOnly) {
+    console.log('\n  No matching React components in scaffold; use CSS only or see docs.');
+    return;
+  }
+  const targetDir = join(projectDir, 'src', 'components', 'rizzo');
+  const plan = opts && opts.dryRun && opts.plan ? opts.plan : null;
+  if (plan) {
+    toCopy.forEach((name) => {
+      const f = files.find((file) => file.replace(/\.(tsx|jsx)$/, '') === name);
+      const ext = f ? (f.endsWith('.tsx') ? '.tsx' : '.jsx') : '.tsx';
+      plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, name + ext)));
+    });
+    const iconsSrc = join(scaffoldDir, 'icons');
+    if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
+      (function collect(s, d) {
+        readdirSync(s, { withFileTypes: true }).forEach((e) => {
+          const destPath = join(d, e.name);
+          if (e.isDirectory()) collect(join(s, e.name), destPath);
+          else plan.wouldWrite.push(pathRelative(projectDir, destPath));
+        });
+      })(iconsSrc, join(targetDir, 'icons'));
+    }
+    if (toCopy.length > 0) plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'index.ts')));
+    return;
+  }
+  mkdirSync(targetDir, { recursive: true });
+  const exports = [];
+  const extUsed = {};
+  for (const name of toCopy) {
+    const tsxPath = join(scaffoldDir, name + '.tsx');
+    const jsxPath = join(scaffoldDir, name + '.jsx');
+    const src = existsSync(tsxPath) ? tsxPath : existsSync(jsxPath) ? jsxPath : null;
+    if (src) {
+      const ext = src.endsWith('.tsx') ? '.tsx' : '.jsx';
+      copyFileSync(src, join(targetDir, name + ext));
+      exports.push(`export { default as ${name} } from './${name}${ext}';`);
+      extUsed[name] = ext;
+    }
+  }
+  const iconsSrc = join(scaffoldDir, 'icons');
+  if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('Settings')) {
+    const configDir = getScaffoldConfigDir();
+    const fontsSrc = join(configDir, 'fonts.ts');
+    if (existsSync(fontsSrc)) {
+      const projectConfigDir = join(projectDir, 'src', 'components', 'config');
+      mkdirSync(projectConfigDir, { recursive: true });
+      copyFileSync(fontsSrc, join(projectConfigDir, 'fonts.ts'));
+    }
+  }
+  if (exports.length > 0 || copyIconsOnly) {
+    if (exports.length > 0) {
+      const indexContent = `/** Rizzo CSS React components — selected via npx rizzo-css add */\n${exports.join('\n')}\n`;
+      writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
+    }
+    const msg = copyIconsOnly ? 'Icons' : exports.length + ' React components' + (existsSync(iconsSrc) ? ' + icons' : '');
+    console.log('\n  ✓ ' + msg + ' copied to ' + targetDir);
+    console.log('  Import in your app: import { Button, Badge, ... } from \'../components/rizzo\' or \'@/components/rizzo\';\n');
+  }
+}
+
+function copyVueComponents(projectDir, selectedNames, opts) {
+  const scaffoldDir = getScaffoldVueDir();
+  if (!existsSync(scaffoldDir)) {
+    console.log('\n  Vue component templates not in this package; use CSS only or see docs.');
+    return;
+  }
+  const files = readdirSync(scaffoldDir).filter((f) => f.endsWith('.vue'));
+  const available = files.map((f) => f.replace('.vue', ''));
+  const toCopy = selectedNames.filter((n) => n !== 'Icons' && available.includes(n));
+  const copyIconsOnly = selectedNames.includes('Icons') && toCopy.length === 0;
+  if (toCopy.length === 0 && !copyIconsOnly) {
+    console.log('\n  No matching Vue components in scaffold; use CSS only or see docs.');
+    return;
+  }
+  const targetDir = join(projectDir, 'src', 'components', 'rizzo');
+  const plan = opts && opts.dryRun && opts.plan ? opts.plan : null;
+  if (plan) {
+    toCopy.forEach((name) => { plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, name + '.vue'))); });
+    const iconsSrc = join(scaffoldDir, 'icons');
+    if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) {
+      (function collect(s, d) {
+        readdirSync(s, { withFileTypes: true }).forEach((e) => {
+          const destPath = join(d, e.name);
+          if (e.isDirectory()) collect(join(s, e.name), destPath);
+          else plan.wouldWrite.push(pathRelative(projectDir, destPath));
+        });
+      })(iconsSrc, join(targetDir, 'icons'));
+    }
+    if (toCopy.length > 0) plan.wouldWrite.push(pathRelative(projectDir, join(targetDir, 'index.ts')));
+    return;
+  }
+  mkdirSync(targetDir, { recursive: true });
+  const exports = [];
+  for (const name of toCopy) {
+    const src = join(scaffoldDir, name + '.vue');
+    if (existsSync(src)) {
+      copyFileSync(src, join(targetDir, name + '.vue'));
+      exports.push(`export { default as ${name} } from './${name}.vue';`);
+    }
+  }
+  const iconsSrc = join(scaffoldDir, 'icons');
+  if (existsSync(iconsSrc) && (toCopy.length > 0 || copyIconsOnly)) copyDirRecursive(iconsSrc, join(targetDir, 'icons'));
+  if (toCopy.includes('Settings')) {
+    const configDir = getScaffoldConfigDir();
+    const fontsSrc = join(configDir, 'fonts.ts');
+    if (existsSync(fontsSrc)) {
+      const projectConfigDir = join(projectDir, 'src', 'components', 'config');
+      mkdirSync(projectConfigDir, { recursive: true });
+      copyFileSync(fontsSrc, join(projectConfigDir, 'fonts.ts'));
+    }
+  }
+  if (exports.length > 0 || copyIconsOnly) {
+    if (exports.length > 0) {
+      const indexContent = `/** Rizzo CSS Vue components — selected via npx rizzo-css add */\n${exports.join('\n')}\n`;
+      writeFileSync(join(targetDir, 'index.ts'), indexContent, 'utf8');
+    }
+    const msg = copyIconsOnly ? 'Icons' : exports.length + ' Vue components' + (existsSync(iconsSrc) ? ' + icons' : '');
+    console.log('\n  ✓ ' + msg + ' copied to ' + targetDir);
+    console.log('  Import in your app: import { Button, Badge, ... } from \'@/components/rizzo\' or relative path;\n');
+  }
+}
+
 /** Add Rizzo CSS to an existing project. Same variation as create new: Landing | Docs | Dashboard. We never overwrite existing files (including config files). frameworkOverride: when set (from init), skip framework prompt. options: { config?, targetDir?, template? } — template is variation: landing|docs|dashboard (or full→landing). */
 async function runAddToExisting(frameworkOverride, options) {
   const cwd = process.cwd();
@@ -1918,6 +2098,8 @@ async function runAddToExisting(frameworkOverride, options) {
       { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
       { value: 'astro', label: 'Astro', color: C.astro },
       { value: 'svelte', label: 'Svelte', color: C.svelte },
+      { value: 'react', label: 'React', color: C.react },
+      { value: 'vue', label: 'Vue', color: C.vue },
     ];
     let frameworkPrompt = '? Framework';
     if (detected) {
@@ -1932,7 +2114,7 @@ async function runAddToExisting(frameworkOverride, options) {
     selectedVariation = await promptTemplate();
   }
 
-  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : framework === 'vanilla' ? Object.keys(VANILLA_COMPONENT_SLUGS) : [];
+  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : framework === 'react' ? REACT_COMPONENTS : framework === 'vue' ? VUE_COMPONENTS : framework === 'vanilla' ? Object.keys(VANILLA_COMPONENT_SLUGS) : [];
   const preselected = options.preselectedComponents && options.preselectedComponents.length > 0 ? options.preselectedComponents : null;
   let selectedComponents;
   if (selectedVariation === 'css-only') {
@@ -1992,7 +2174,7 @@ async function runAddToExisting(frameworkOverride, options) {
   const paths = getFrameworkCssPaths(framework);
   const targetDirRaw = (options && options.targetDir) || (config && config.targetDir) || paths.targetDir;
   let cssTarget;
-  if (framework === 'astro') {
+  if (framework === 'astro' || framework === 'react' || framework === 'vue') {
     cssTarget = join(cwd, 'public', 'css', 'rizzo.min.css');
   } else if (framework === 'svelte') {
     cssTarget = join(cwd, 'static', 'css', 'rizzo.min.css');
@@ -2077,7 +2259,7 @@ async function runAddToExisting(frameworkOverride, options) {
   }
 
   if (options._overwriteCss) {
-    if (framework === 'astro') {
+    if (framework === 'astro' || framework === 'react' || framework === 'vue') {
       copyRizzoCssAndFontsForAstro(cwd, cssSource, copyOpts);
     } else if (framework === 'svelte') {
       copyRizzoCssAndFontsForSvelte(cwd, cssSource, copyOpts);
@@ -2105,6 +2287,14 @@ async function runAddToExisting(frameworkOverride, options) {
     const expanded = expandWithDeps('astro', selectedComponents);
     logAddedDeps(selectedComponents, expanded, 'astro');
     copyAstroComponents(cwd, expanded, copyOpts);
+  } else if (framework === 'react' && selectedComponents.length > 0) {
+    const expanded = expandWithDeps('react', selectedComponents);
+    logAddedDeps(selectedComponents, expanded, 'react');
+    copyReactComponents(cwd, expanded, copyOpts);
+  } else if (framework === 'vue' && selectedComponents.length > 0) {
+    const expanded = expandWithDeps('vue', selectedComponents);
+    logAddedDeps(selectedComponents, expanded, 'vue');
+    copyVueComponents(cwd, expanded, copyOpts);
   } else if (framework === 'vanilla' && selectedComponents.length > 0) {
     const linkHrefForVanilla = (options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref;
     const vanillaRepl = { '{{LINK_HREF}}': linkHrefForVanilla, '{{DATA_THEME}}': theme };
@@ -2135,7 +2325,7 @@ async function runAddToExisting(frameworkOverride, options) {
     if (options.dryRun && needsJs && !existsSync(vanillaJsPath) && options.plan) options.plan.wouldWrite.push('js/main.js');
   }
 
-  const linkHref = (framework === 'astro' || framework === 'svelte') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
+  const linkHref = (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue') ? paths.linkHref : ((options && options.targetDir) ? getLinkHrefForTargetDir(framework, options.targetDir) : paths.linkHref);
   const pmFromOption = options && options.packageManager && VALID_PACKAGE_MANAGERS.includes(options.packageManager);
   const pm = pmFromOption
     ? getPackageManagerCommands({ agent: options.packageManager, command: options.packageManager })
@@ -2143,7 +2333,7 @@ async function runAddToExisting(frameworkOverride, options) {
       ? getPackageManagerCommands({ agent: config.packageManager, command: config.packageManager })
       : resolvePackageManager(cwd);
   const cliExample = pm.dlx('rizzo-css theme');
-  const configTargetDir = framework === 'astro' ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
+  const configTargetDir = (framework === 'astro' || framework === 'react' || framework === 'vue') ? 'public/css' : framework === 'svelte' ? 'static/css' : targetDirRaw;
   const configPath = join(cwd, RIZZO_CONFIG_FILE);
   const hadConfig = existsSync(configPath);
   if (options.dryRun) {
@@ -2169,7 +2359,7 @@ async function runAddToExisting(frameworkOverride, options) {
   copyPackageLicense(cwd);
   const writeSnippet = options.writeSnippet !== false;
   if (writeSnippet) {
-    const where = framework === 'svelte' ? 'Root layout (e.g. src/app.html)' : framework === 'astro' ? 'Layout (e.g. src/layouts/Layout.astro)' : 'HTML or layout';
+    const where = framework === 'svelte' ? 'Root layout (e.g. src/app.html)' : framework === 'astro' ? 'Layout (e.g. src/layouts/Layout.astro)' : (framework === 'react' || framework === 'vue') ? 'index.html or root component' : 'HTML or layout';
     const snippetBody = [
       'Add to ' + where + ':',
       '',
@@ -2211,6 +2401,11 @@ async function runAddToExisting(frameworkOverride, options) {
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
     console.log('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
     console.log('  Components: src/components/rizzo — import from there.');
+  } else if (framework === 'react' || framework === 'vue') {
+    console.log('\nIn index.html or root component, add:');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('  data-theme="' + theme + '" on <html> (themes: ' + cliExample + ')');
+    console.log('  Components: src/components/rizzo — import from there or @/components/rizzo.');
   } else {
     console.log('\nIn your HTML or layout, add:');
     console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
@@ -2222,7 +2417,7 @@ async function runAddToExisting(frameworkOverride, options) {
   }
   const addCmd = pm.add('rizzo-css');
   console.log('\n  To add the rizzo-css package to this project (optional): ' + addCmd);
-  const shouldPromptAdd = (framework === 'astro' || framework === 'svelte') && options.noInstall !== true && options.installPackage !== true && process.stdin.isTTY;
+  const shouldPromptAdd = (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue') && options.noInstall !== true && options.installPackage !== true && process.stdin.isTTY;
   if (shouldPromptAdd) {
     console.log('\n  Add rizzo-css to your package.json so you can import components from the package.');
     const answer = await question('  Run ' + addCmd + '? (Y/n) ');
@@ -2279,6 +2474,8 @@ async function cmdInit(argv) {
       fullAllComponents = true;
       if (framework === 'svelte') selectedComponents = [...SVELTE_COMPONENTS];
       else if (framework === 'astro') selectedComponents = [...ASTRO_COMPONENTS];
+      else if (framework === 'react') selectedComponents = [...REACT_COMPONENTS];
+      else if (framework === 'vue') selectedComponents = [...VUE_COMPONENTS];
       else selectedComponents = Object.keys(VANILLA_COMPONENT_SLUGS);
     }
     const projectDir = customProjectPath ? pathResolve(cwd, customProjectPath) : cwd;
@@ -2296,6 +2493,8 @@ async function cmdInit(argv) {
         { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
         { value: 'astro', label: 'Astro', color: C.astro },
         { value: 'svelte', label: 'Svelte', color: C.svelte },
+        { value: 'react', label: 'React', color: C.react },
+        { value: 'vue', label: 'Vue', color: C.vue },
       ],
       '? Framework — all get the same CSS and component styles'
     );
@@ -2341,7 +2540,7 @@ async function cmdInit(argv) {
       fullAllComponents = false;
     } else if (selectedVariation === 'full' && hasFullVariant(framework)) {
       fullAllComponents = true;
-      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
+      selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : framework === 'react' ? [...REACT_COMPONENTS] : framework === 'vue' ? [...VUE_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
     } else {
       const addChoice = await selectMenu(
         [
@@ -2352,9 +2551,9 @@ async function cmdInit(argv) {
       );
       fullAllComponents = (addChoice === 'all');
       if (fullAllComponents) {
-        selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
+        selectedComponents = framework === 'svelte' ? [...SVELTE_COMPONENTS] : framework === 'astro' ? [...ASTRO_COMPONENTS] : framework === 'react' ? [...REACT_COMPONENTS] : framework === 'vue' ? [...VUE_COMPONENTS] : Object.keys(VANILLA_COMPONENT_SLUGS);
       } else {
-        const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : Object.keys(VANILLA_COMPONENT_SLUGS);
+        const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : framework === 'react' ? REACT_COMPONENTS : framework === 'vue' ? VUE_COMPONENTS : Object.keys(VANILLA_COMPONENT_SLUGS);
         const recommended = RECOMMENDED_COMPONENTS.filter((c) => componentList.includes(c));
         selectedComponents = await promptComponentChoice(componentList, framework, recommended);
       }
@@ -2419,7 +2618,7 @@ async function cmdInit(argv) {
 
   // Full gets all required dependencies so everything works; manual gets deps when user picks (see prompt labels).
   let componentsToCopy = selectedComponents;
-  if ((framework === 'astro' || framework === 'svelte') && selectedComponents.length > 0) {
+  if ((framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue') && selectedComponents.length > 0) {
     componentsToCopy = expandWithDeps(framework, selectedComponents);
     logAddedDeps(selectedComponents, componentsToCopy, framework);
   }
@@ -2698,8 +2897,8 @@ async function cmdInit(argv) {
     copyPackageLicense(projectDir);
     copyVanillaGitignore(projectDir);
   } else {
-    // Add-to-existing (landing) or Vanilla create new with picked components: CSS, fonts, icons, sfx (framework-appropriate)
-    if (framework === 'astro') {
+    // Add-to-existing (landing) or Vanilla/React/Vue create new with picked components: CSS, fonts, icons, sfx (framework-appropriate)
+    if (framework === 'astro' || framework === 'react' || framework === 'vue') {
       copyRizzoCssAndFontsForAstro(projectDir, cssSource);
       cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
     } else if (framework === 'svelte') {
@@ -2719,7 +2918,7 @@ async function cmdInit(argv) {
     if (statSync(cssTarget).size < 5000) {
       console.warn('\nWarning: rizzo.min.css is very small. From repo root run: pnpm build:css');
     }
-    const linkHrefForSetup = framework === 'vanilla' ? 'css/rizzo.min.css' : '/css/rizzo.min.css';
+    const linkHrefForSetup = (framework === 'vanilla') ? 'css/rizzo.min.css' : '/css/rizzo.min.css';
     const setupMdContent = buildRizzoSetupMd(framework, {
       linkHref: linkHrefForSetup,
       theme,
@@ -2744,10 +2943,19 @@ async function cmdInit(argv) {
         mkdirSync(join(projectDir, 'static'), { recursive: true });
         indexPath = svelteIndex;
         writeFileSync(svelteIndex, landingHtmlForAdd, 'utf8');
+      } else if ((framework === 'react' || framework === 'vue') && !existsSync(join(projectDir, 'public', 'index.html'))) {
+        mkdirSync(join(projectDir, 'public'), { recursive: true });
+        indexPath = join(projectDir, 'public', 'index.html');
+        writeFileSync(indexPath, landingHtmlForAdd, 'utf8');
       }
       writeFileSync(join(projectDir, RIZZO_SETUP_FILE), setupMdContent, 'utf8');
       copyPackageLicense(projectDir);
       if (framework === 'vanilla') copyVanillaGitignore(projectDir);
+      if ((framework === 'react' || framework === 'vue') && componentsToCopy.length > 0) {
+        copyRizzoIcons(projectDir, framework);
+        if (framework === 'react') copyReactComponents(projectDir, componentsToCopy);
+        else copyVueComponents(projectDir, componentsToCopy);
+      }
     } else if (framework === 'vanilla' && selectedTemplate === 'full' && !fullAllComponents) {
       indexPath = join(projectDir, 'index.html');
       if (!existsSync(indexPath)) {
@@ -2786,6 +2994,18 @@ async function cmdInit(argv) {
       else writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd(framework, { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: [{ relativePath: 'static/index.html', content: landingHtml }] }), 'utf8');
       writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
       copyPackageLicense(projectDir);
+    } else if (framework === 'react' || framework === 'vue') {
+      indexPath = join(projectDir, 'public', 'index.html');
+      mkdirSync(join(projectDir, 'public'), { recursive: true });
+      if (!existsSync(indexPath)) writeFileSync(indexPath, landingHtml, 'utf8');
+      else writeFileSync(join(projectDir, RIZZO_SETUP_FILE), buildRizzoSetupMd(framework, { linkHref: '/css/rizzo.min.css', theme, defaultDark, defaultLight, skippedFiles: [{ relativePath: 'public/index.html', content: landingHtml }] }), 'utf8');
+      writeFileSync(join(projectDir, SCAFFOLD_README_FILENAME), FALLBACK_MINIMAL_README, 'utf8');
+      if (componentsToCopy.length > 0) {
+        copyRizzoIcons(projectDir, framework);
+        if (framework === 'react') copyReactComponents(projectDir, componentsToCopy);
+        else copyVueComponents(projectDir, componentsToCopy);
+      }
+      copyPackageLicense(projectDir);
     } else {
       copyPackageLicense(projectDir);
     }