shadcn-vue 2.0.0 → 2.0.1

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/commands/init.ts
-import { promises as fs8 } from "node:fs";
+import { promises as fs9 } from "node:fs";
 
 // src/utils/errors.ts
 var MISSING_DIR_OR_EMPTY_PROJECT = "1";
@@ -9,6 +9,7 @@ var MISSING_CONFIG = "3";
 var TAILWIND_NOT_CONFIGURED = "5";
 var IMPORT_ALIAS_MISSING = "6";
 var UNSUPPORTED_FRAMEWORK = "7";
+var BUILD_MISSING_REGISTRY_FILE = "13";
 
 // src/utils/frameworks.ts
 var FRAMEWORKS = {
@@ -182,7 +183,6 @@ async function getRawConfig(cwd) {
     }
     return rawConfigSchema.parse(configResult.config);
   } catch (error) {
-    console.log(error.message);
     throw new Error(`Invalid configuration found in ${cwd}/components.json.`);
   }
 }
@@ -544,41 +544,37 @@ Once configured, you can use the cli to add components.`
   };
 }
 
-// src/utils/handle-error.ts
-import { consola as consola2 } from "consola";
-function handleError(error) {
-  consola2.log("this is error: ", error);
-  if (typeof error === "string") {
-    consola2.error(error);
-    process.exit(1);
-  }
-  if (error instanceof Error) {
-    consola2.error(error.message);
-    process.exit(1);
-  }
-  consola2.error("Something went wrong. Please try again.");
-  process.exit(1);
-}
-
-// src/utils/registry/schema.ts
+// src/registry/schema.ts
 import { z as z3 } from "zod";
 var registryItemTypeSchema = z3.enum([
-  "registry:style",
   "registry:lib",
-  "registry:example",
   "registry:block",
   "registry:component",
   "registry:ui",
   "registry:hook",
+  "registry:page",
+  "registry:file",
   "registry:theme",
-  "registry:page"
+  "registry:style",
+  // Internal use only
+  "registry:example",
+  "registry:internal"
+]);
+var registryItemFileSchema = z3.discriminatedUnion("type", [
+  // Target is required for registry:file and registry:page
+  z3.object({
+    path: z3.string(),
+    content: z3.string().optional(),
+    type: z3.enum(["registry:file", "registry:page"]),
+    target: z3.string()
+  }),
+  z3.object({
+    path: z3.string(),
+    content: z3.string().optional(),
+    type: registryItemTypeSchema.exclude(["registry:file", "registry:page"]),
+    target: z3.string().optional()
+  })
 ]);
-var registryItemFileSchema = z3.object({
-  path: z3.string(),
-  content: z3.string().optional(),
-  type: registryItemTypeSchema,
-  target: z3.string().optional()
-});
 var registryItemTailwindSchema = z3.object({
   config: z3.object({
     content: z3.array(z3.string()).optional(),
@@ -587,12 +583,29 @@ var registryItemTailwindSchema = z3.object({
   }).optional()
 });
 var registryItemCssVarsSchema = z3.object({
+  theme: z3.record(z3.string(), z3.string()).optional(),
   light: z3.record(z3.string(), z3.string()).optional(),
   dark: z3.record(z3.string(), z3.string()).optional()
 });
+var registryItemCssSchema = z3.record(
+  z3.string(),
+  z3.lazy(
+    () => z3.union([
+      z3.string(),
+      z3.record(
+        z3.string(),
+        z3.union([z3.string(), z3.record(z3.string(), z3.string())])
+      )
+    ])
+  )
+);
 var registryItemSchema = z3.object({
+  $schema: z3.string().optional(),
+  extends: z3.string().optional(),
   name: z3.string(),
   type: registryItemTypeSchema,
+  title: z3.string().optional(),
+  author: z3.string().min(2).optional(),
   description: z3.string().optional(),
   dependencies: z3.array(z3.string()).optional(),
   devDependencies: z3.array(z3.string()).optional(),
@@ -600,14 +613,17 @@ var registryItemSchema = z3.object({
   files: z3.array(registryItemFileSchema).optional(),
   tailwind: registryItemTailwindSchema.optional(),
   cssVars: registryItemCssVarsSchema.optional(),
+  css: registryItemCssSchema.optional(),
   meta: z3.record(z3.string(), z3.any()).optional(),
-  docs: z3.string().optional()
+  docs: z3.string().optional(),
+  categories: z3.array(z3.string()).optional()
 });
-var registryIndexSchema = z3.array(
-  registryItemSchema.extend({
-    files: z3.array(z3.union([z3.string(), registryItemFileSchema])).optional()
-  })
-);
+var registrySchema = z3.object({
+  name: z3.string(),
+  homepage: z3.string(),
+  items: z3.array(registryItemSchema)
+});
+var registryIndexSchema = z3.array(registryItemSchema);
 var stylesSchema = z3.array(
   z3.object({
     name: z3.string(),
@@ -623,14 +639,8 @@ var registryBaseColorSchema = z3.object({
     light: z3.record(z3.string(), z3.string()),
     dark: z3.record(z3.string(), z3.string())
   }),
-  cssVars: z3.object({
-    light: z3.record(z3.string(), z3.string()),
-    dark: z3.record(z3.string(), z3.string())
-  }),
-  cssVarsV4: z3.object({
-    light: z3.record(z3.string(), z3.string()),
-    dark: z3.record(z3.string(), z3.string())
-  }).optional(),
+  cssVars: registryItemCssVarsSchema,
+  cssVarsV4: registryItemCssVarsSchema.optional(),
   inlineColorsTemplate: z3.string(),
   cssVarsTemplate: z3.string()
 });
@@ -640,9 +650,26 @@ var registryResolvedItemsTreeSchema = registryItemSchema.pick({
   files: true,
   tailwind: true,
   cssVars: true,
+  css: true,
   docs: true
 });
 
+// src/utils/handle-error.ts
+import { consola as consola2 } from "consola";
+function handleError(error) {
+  consola2.log("this is error: ", error);
+  if (typeof error === "string") {
+    consola2.error(error);
+    process.exit(1);
+  }
+  if (error instanceof Error) {
+    consola2.error(error.message);
+    process.exit(1);
+  }
+  consola2.error("Something went wrong. Please try again.");
+  process.exit(1);
+}
+
 // src/utils/updaters/update-tailwind-config.ts
 import { promises as fs4 } from "node:fs";
 import { tmpdir } from "node:os";
@@ -999,7 +1026,7 @@ function buildTailwindThemeColorsFromCssVars(cssVars) {
   return result;
 }
 
-// src/utils/registry/index.ts
+// src/registry/api.ts
 import deepmerge2 from "deepmerge";
 import { ofetch } from "ofetch";
 import path6 from "pathe";
@@ -1007,6 +1034,7 @@ import { ProxyAgent } from "undici";
 import { z as z4 } from "zod";
 var REGISTRY_URL = process.env.REGISTRY_URL ?? "https://shadcn-vue.com/r";
 var agent = process.env.https_proxy ? new ProxyAgent(process.env.https_proxy) : void 0;
+var registryCache = /* @__PURE__ */ new Map();
 async function getRegistryIndex() {
   try {
     const [result] = await fetchRegistry(["index.json"]);
@@ -1035,6 +1063,18 @@ async function getRegistryIcons() {
     return {};
   }
 }
+async function getRegistryItem(name, style) {
+  try {
+    const [result] = await fetchRegistry([
+      isUrl(name) ? name : `styles/${style}/${name}.json`
+    ]);
+    return registryItemSchema.parse(result);
+  } catch (error) {
+    logger.break();
+    handleError(error);
+    return null;
+  }
+}
 var BASE_COLORS = [
   {
     name: "neutral",
@@ -1096,11 +1136,15 @@ async function getItemTargetPath(config, item, override) {
 async function fetchRegistry(paths) {
   try {
     const results = await Promise.all(
-      paths.map(async (path17) => {
-        const url = getRegistryUrl(path17);
+      paths.map(async (path20) => {
+        const url = getRegistryUrl(path20);
+        if (registryCache.has(url)) {
+          return registryCache.get(url);
+        }
         const response = await ofetch(url, { dispatcher: agent, parseResponse: JSON.parse }).catch((error) => {
           throw new Error(error.data);
         });
+        registryCache.set(url, response);
         return response;
       })
     );
@@ -1249,6 +1293,7 @@ async function registryGetTheme(name, config) {
       }
     },
     cssVars: {
+      theme: {},
       light: {
         radius: "0.5rem"
       },
@@ -1258,9 +1303,13 @@ async function registryGetTheme(name, config) {
   if (config.tailwind.cssVariables) {
     theme.tailwind.config.theme.extend.colors = {
       ...theme.tailwind.config.theme.extend.colors,
-      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark)
+      ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark ?? {})
     };
     theme.cssVars = {
+      theme: {
+        ...baseColor.cssVars.theme,
+        ...theme.cssVars.theme
+      },
       light: {
         ...baseColor.cssVars.light,
         ...theme.cssVars.light
@@ -1272,6 +1321,10 @@ async function registryGetTheme(name, config) {
     };
     if (tailwindVersion === "v4" && baseColor.cssVarsV4) {
       theme.cssVars = {
+        theme: {
+          ...baseColor.cssVarsV4.theme,
+          ...theme.cssVars.theme
+        },
         light: {
           ...theme.cssVars.light,
           ...baseColor.cssVarsV4.light
@@ -1285,29 +1338,273 @@ async function registryGetTheme(name, config) {
   }
   return theme;
 }
-function getRegistryUrl(path17) {
-  if (isUrl(path17)) {
-    const url = new URL(path17);
+function getRegistryUrl(path20) {
+  if (isUrl(path20)) {
+    const url = new URL(path20);
     if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith("/json")) {
       url.pathname = `${url.pathname}/json`;
     }
     return url.toString();
   }
-  return `${REGISTRY_URL}/${path17}`;
+  return `${REGISTRY_URL}/${path20}`;
 }
-function isUrl(path17) {
+function isUrl(path20) {
   try {
-    new URL(path17);
+    new URL(path20);
     return true;
   } catch (error) {
     return false;
   }
 }
+async function resolveRegistryItems(names, config) {
+  const registryDependencies = [];
+  for (const name of names) {
+    const itemRegistryDependencies = await resolveRegistryDependencies(
+      name,
+      config
+    );
+    registryDependencies.push(...itemRegistryDependencies);
+  }
+  return Array.from(new Set(registryDependencies));
+}
 
-// src/utils/updaters/update-css-vars.ts
+// src/utils/updaters/update-css.ts
 import { promises as fs5 } from "node:fs";
-import path7 from "node:path";
+import path7 from "pathe";
 import postcss from "postcss";
+async function updateCss(css, config, options) {
+  if (!config.resolvedPaths.tailwindCss || !css || Object.keys(css).length === 0) {
+    return;
+  }
+  options = {
+    silent: false,
+    ...options
+  };
+  const cssFilepath = config.resolvedPaths.tailwindCss;
+  const cssFilepathRelative = path7.relative(
+    config.resolvedPaths.cwd,
+    cssFilepath
+  );
+  const cssSpinner = spinner(
+    `Updating ${highlighter.info(cssFilepathRelative)}`,
+    {
+      silent: options.silent
+    }
+  ).start();
+  const raw = await fs5.readFile(cssFilepath, "utf8");
+  const output = await transformCss(raw, css);
+  await fs5.writeFile(cssFilepath, output, "utf8");
+  cssSpinner.succeed();
+}
+async function transformCss(input, css) {
+  const plugins = [updateCssPlugin(css)];
+  const result = await postcss(plugins).process(input, {
+    from: void 0
+  });
+  let output = result.css;
+  output = output.replace(/\/\* ---break--- \*\//g, "");
+  output = output.replace(/(\n\s*\n)+/g, "\n\n");
+  output = output.trimEnd();
+  return output;
+}
+function updateCssPlugin(css) {
+  return {
+    postcssPlugin: "update-css",
+    Once(root) {
+      for (const [selector, properties] of Object.entries(css)) {
+        if (selector.startsWith("@")) {
+          const atRuleMatch = selector.match(/@([a-z-]+)\s*(.*)/i);
+          if (!atRuleMatch)
+            continue;
+          const [, name, params] = atRuleMatch;
+          if (name === "keyframes") {
+            let themeInline = root.nodes?.find(
+              (node) => node.type === "atrule" && node.name === "theme" && node.params === "inline"
+            );
+            if (!themeInline) {
+              themeInline = postcss.atRule({
+                name: "theme",
+                params: "inline",
+                raws: { semicolon: true, between: " ", before: "\n" }
+              });
+              root.append(themeInline);
+              root.insertBefore(
+                themeInline,
+                postcss.comment({ text: "---break---" })
+              );
+            }
+            const keyframesRule = postcss.atRule({
+              name: "keyframes",
+              params,
+              raws: { semicolon: true, between: " ", before: "\n  " }
+            });
+            themeInline.append(keyframesRule);
+            if (typeof properties === "object") {
+              for (const [step, stepProps] of Object.entries(properties)) {
+                processRule(keyframesRule, step, stepProps);
+              }
+            }
+          } else if (name === "utility") {
+            const utilityAtRule = root.nodes?.find(
+              (node) => node.type === "atrule" && node.name === name && node.params === params
+            );
+            if (!utilityAtRule) {
+              const atRule = postcss.atRule({
+                name,
+                params,
+                raws: { semicolon: true, between: " ", before: "\n" }
+              });
+              root.append(atRule);
+              root.insertBefore(
+                atRule,
+                postcss.comment({ text: "---break---" })
+              );
+              if (typeof properties === "object") {
+                for (const [prop, value] of Object.entries(properties)) {
+                  if (typeof value === "string") {
+                    const decl = postcss.decl({
+                      prop,
+                      value,
+                      raws: { semicolon: true, before: "\n    " }
+                    });
+                    atRule.append(decl);
+                  } else if (typeof value === "object") {
+                    processRule(atRule, prop, value);
+                  }
+                }
+              }
+            } else {
+              if (typeof properties === "object") {
+                for (const [prop, value] of Object.entries(properties)) {
+                  if (typeof value === "string") {
+                    const existingDecl = utilityAtRule.nodes?.find(
+                      (node) => node.type === "decl" && node.prop === prop
+                    );
+                    const decl = postcss.decl({
+                      prop,
+                      value,
+                      raws: { semicolon: true, before: "\n    " }
+                    });
+                    existingDecl ? existingDecl.replaceWith(decl) : utilityAtRule.append(decl);
+                  } else if (typeof value === "object") {
+                    processRule(utilityAtRule, prop, value);
+                  }
+                }
+              }
+            }
+          } else {
+            processAtRule(root, name, params, properties);
+          }
+        } else {
+          processRule(root, selector, properties);
+        }
+      }
+    }
+  };
+}
+function processAtRule(root, name, params, properties) {
+  let atRule = root.nodes?.find(
+    (node) => node.type === "atrule" && node.name === name && node.params === params
+  );
+  if (!atRule) {
+    atRule = postcss.atRule({
+      name,
+      params,
+      raws: { semicolon: true, between: " ", before: "\n" }
+    });
+    root.append(atRule);
+    root.insertBefore(atRule, postcss.comment({ text: "---break---" }));
+  }
+  if (typeof properties === "object") {
+    for (const [childSelector, childProps] of Object.entries(properties)) {
+      if (childSelector.startsWith("@")) {
+        const nestedMatch = childSelector.match(/@([a-z-]+)\s*(.*)/i);
+        if (nestedMatch) {
+          const [, nestedName, nestedParams] = nestedMatch;
+          processAtRule(atRule, nestedName, nestedParams, childProps);
+        }
+      } else {
+        processRule(atRule, childSelector, childProps);
+      }
+    }
+  } else if (typeof properties === "string") {
+    try {
+      const parsed = postcss.parse(`.temp{${properties}}`);
+      const tempRule = parsed.first;
+      if (tempRule && tempRule.nodes) {
+        const rule = postcss.rule({
+          selector: "temp",
+          raws: { semicolon: true, between: " ", before: "\n  " }
+        });
+        tempRule.nodes.forEach((node) => {
+          if (node.type === "decl") {
+            const clone = node.clone();
+            clone.raws.before = "\n    ";
+            rule.append(clone);
+          }
+        });
+        if (rule.nodes?.length) {
+          atRule.append(rule);
+        }
+      }
+    } catch (error) {
+      console.error("Error parsing at-rule content:", properties, error);
+      throw error;
+    }
+  }
+}
+function processRule(parent, selector, properties) {
+  let rule = parent.nodes?.find(
+    (node) => node.type === "rule" && node.selector === selector
+  );
+  if (!rule) {
+    rule = postcss.rule({
+      selector,
+      raws: { semicolon: true, between: " ", before: "\n  " }
+    });
+    parent.append(rule);
+  }
+  if (typeof properties === "object") {
+    for (const [prop, value] of Object.entries(properties)) {
+      if (typeof value === "string") {
+        const decl = postcss.decl({
+          prop,
+          value,
+          raws: { semicolon: true, before: "\n    " }
+        });
+        const existingDecl = rule.nodes?.find(
+          (node) => node.type === "decl" && node.prop === prop
+        );
+        existingDecl ? existingDecl.replaceWith(decl) : rule.append(decl);
+      } else if (typeof value === "object") {
+        const nestedSelector = prop.startsWith("&") ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`) : prop;
+        processRule(parent, nestedSelector, value);
+      }
+    }
+  } else if (typeof properties === "string") {
+    try {
+      const parsed = postcss.parse(`.temp{${properties}}`);
+      const tempRule = parsed.first;
+      if (tempRule && tempRule.nodes) {
+        tempRule.nodes.forEach((node) => {
+          if (node.type === "decl") {
+            const clone = node.clone();
+            clone.raws.before = "\n    ";
+            rule?.append(clone);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Error parsing rule content:", selector, properties, error);
+      throw error;
+    }
+  }
+}
+
+// src/utils/updaters/update-css-vars.ts
+import { promises as fs6 } from "node:fs";
+import path8 from "node:path";
+import postcss2 from "postcss";
 import AtRule from "postcss/lib/at-rule";
 import { z as z5 } from "zod";
 async function updateCssVars(cssVars, config, options) {
@@ -1318,37 +1615,45 @@ async function updateCssVars(cssVars, config, options) {
     cleanupDefaultNextStyles: false,
     silent: false,
     tailwindVersion: "v3",
+    overwriteCssVars: false,
+    initIndex: true,
     ...options
   };
   const cssFilepath = config.resolvedPaths.tailwindCss;
-  const cssFilepathRelative = path7.relative(
+  const cssFilepathRelative = path8.relative(
     config.resolvedPaths.cwd,
     cssFilepath
   );
   const cssVarsSpinner = spinner(
-    `Updating ${highlighter.info(cssFilepathRelative)}`,
+    `Updating CSS variables in ${highlighter.info(cssFilepathRelative)}`,
     {
       silent: options.silent
     }
   ).start();
-  const raw = await fs5.readFile(cssFilepath, "utf8");
+  const raw = await fs6.readFile(cssFilepath, "utf8");
   const output = await transformCssVars(raw, cssVars ?? {}, config, {
     cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
     tailwindVersion: options.tailwindVersion,
-    tailwindConfig: options.tailwindConfig
+    tailwindConfig: options.tailwindConfig,
+    overwriteCssVars: options.overwriteCssVars,
+    initIndex: options.initIndex
   });
-  await fs5.writeFile(cssFilepath, output, "utf8");
+  await fs6.writeFile(cssFilepath, output, "utf8");
   cssVarsSpinner.succeed();
 }
 async function transformCssVars(input, cssVars, config, options = {
   cleanupDefaultNextStyles: false,
   tailwindVersion: "v3",
-  tailwindConfig: void 0
+  tailwindConfig: void 0,
+  overwriteCssVars: false,
+  initIndex: true
 }) {
   options = {
     cleanupDefaultNextStyles: false,
     tailwindVersion: "v3",
     tailwindConfig: void 0,
+    overwriteCssVars: false,
+    initIndex: true,
     ...options
   };
   let plugins = [updateCssVarsPlugin(cssVars)];
@@ -1356,11 +1661,22 @@ async function transformCssVars(input, cssVars, config, options = {
     plugins.push(cleanupDefaultNextStylesPlugin());
   }
   if (options.tailwindVersion === "v4") {
-    plugins = [addCustomVariant({ params: "dark (&:is(.dark *))" })];
+    plugins = [];
+    if (config.resolvedPaths?.cwd) {
+      const packageInfo = getPackageInfo(config.resolvedPaths.cwd);
+      if (!packageInfo?.dependencies?.["tailwindcss-animate"] && !packageInfo?.devDependencies?.["tailwindcss-animate"] && options.initIndex) {
+        plugins.push(addCustomImport({ params: "tw-animate-css" }));
+      }
+    }
+    plugins.push(addCustomVariant({ params: "dark (&:is(.dark *))" }));
     if (options.cleanupDefaultNextStyles) {
       plugins.push(cleanupDefaultNextStylesPlugin());
     }
-    plugins.push(updateCssVarsPluginV4(cssVars));
+    plugins.push(
+      updateCssVarsPluginV4(cssVars, {
+        overwriteCssVars: options.overwriteCssVars
+      })
+    );
     plugins.push(updateThemePlugin(cssVars));
     if (options.tailwindConfig) {
       plugins.push(updateTailwindConfigPlugin(options.tailwindConfig));
@@ -1368,12 +1684,12 @@ async function transformCssVars(input, cssVars, config, options = {
       plugins.push(updateTailwindConfigKeyframesPlugin(options.tailwindConfig));
     }
   }
-  if (config.tailwind.cssVariables) {
+  if (config.tailwind.cssVariables && options.initIndex) {
     plugins.push(
       updateBaseLayerPlugin({ tailwindVersion: options.tailwindVersion })
     );
   }
-  const result = await postcss(plugins).process(input, {
+  const result = await postcss2(plugins).process(input, {
     from: void 0
   });
   let output = result.css;
@@ -1406,13 +1722,13 @@ function updateBaseLayerPlugin({
         )
       );
       if (!baseLayer) {
-        baseLayer = postcss.atRule({
+        baseLayer = postcss2.atRule({
           name: "layer",
           params: "base",
           raws: { semicolon: true, between: " ", before: "\n" }
         });
         root.append(baseLayer);
-        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }));
+        root.insertBefore(baseLayer, postcss2.comment({ text: "---break---" }));
       }
       requiredRules.forEach(({ selector, apply }) => {
         const existingRule = baseLayer?.nodes?.find(
@@ -1420,10 +1736,10 @@ function updateBaseLayerPlugin({
         );
         if (!existingRule) {
           baseLayer?.append(
-            postcss.rule({
+            postcss2.rule({
               selector,
               nodes: [
-                postcss.atRule({
+                postcss2.atRule({
                   name: "apply",
                   params: apply,
                   raws: { semicolon: true, before: "\n    " }
@@ -1445,7 +1761,7 @@ function updateCssVarsPlugin(cssVars) {
         (node) => node.type === "atrule" && node.name === "layer" && node.params === "base"
       );
       if (!(baseLayer instanceof AtRule)) {
-        baseLayer = postcss.atRule({
+        baseLayer = postcss2.atRule({
           name: "layer",
           params: "base",
           nodes: [],
@@ -1456,7 +1772,7 @@ function updateCssVarsPlugin(cssVars) {
           }
         });
         root.append(baseLayer);
-        root.insertBefore(baseLayer, postcss.comment({ text: "---break---" }));
+        root.insertBefore(baseLayer, postcss2.comment({ text: "---break---" }));
       }
       if (baseLayer !== void 0) {
         Object.entries(cssVars).forEach(([key, vars]) => {
@@ -1523,7 +1839,7 @@ function addOrUpdateVars(baseLayer, selector, vars) {
   );
   if (!ruleNode) {
     if (Object.keys(vars).length > 0) {
-      ruleNode = postcss.rule({
+      ruleNode = postcss2.rule({
         selector,
         raws: { between: " ", before: "\n  " }
       });
@@ -1532,7 +1848,7 @@ function addOrUpdateVars(baseLayer, selector, vars) {
   }
   Object.entries(vars).forEach(([key, value]) => {
     const prop = `--${key.replace(/^--/, "")}`;
-    const newDecl = postcss.decl({
+    const newDecl = postcss2.decl({
       prop,
       value,
       raws: { semicolon: true }
@@ -1543,23 +1859,50 @@ function addOrUpdateVars(baseLayer, selector, vars) {
     existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl);
   });
 }
-function updateCssVarsPluginV4(cssVars) {
+function updateCssVarsPluginV4(cssVars, options) {
   return {
     postcssPlugin: "update-css-vars-v4",
     Once(root) {
       Object.entries(cssVars).forEach(([key, vars]) => {
-        const selector = key === "light" ? ":root" : `.${key}`;
+        let selector = key === "light" ? ":root" : `.${key}`;
+        if (key === "theme") {
+          selector = "@theme";
+          const themeNode = upsertThemeNode(root);
+          Object.entries(vars).forEach(([key2, value]) => {
+            const prop = `--${key2.replace(/^--/, "")}`;
+            const newDecl = postcss2.decl({
+              prop,
+              value,
+              raws: { semicolon: true }
+            });
+            const existingDecl = themeNode?.nodes?.find(
+              (node) => node.type === "decl" && node.prop === prop
+            );
+            if (options.overwriteCssVars) {
+              if (existingDecl) {
+                existingDecl.replaceWith(newDecl);
+              } else {
+                themeNode?.append(newDecl);
+              }
+            } else {
+              if (!existingDecl) {
+                themeNode?.append(newDecl);
+              }
+            }
+          });
+          return;
+        }
         let ruleNode = root.nodes?.find(
           (node) => node.type === "rule" && node.selector === selector
         );
         if (!ruleNode && Object.keys(vars).length > 0) {
-          ruleNode = postcss.rule({
+          ruleNode = postcss2.rule({
             selector,
             nodes: [],
             raws: { semicolon: true, between: " ", before: "\n" }
           });
           root.append(ruleNode);
-          root.insertBefore(ruleNode, postcss.comment({ text: "---break---" }));
+          root.insertBefore(ruleNode, postcss2.comment({ text: "---break---" }));
         }
         Object.entries(vars).forEach(([key2, value]) => {
           let prop = `--${key2.replace(/^--/, "")}`;
@@ -1569,7 +1912,7 @@ function updateCssVarsPluginV4(cssVars) {
           if (isLocalHSLValue(value)) {
             value = `hsl(${value})`;
           }
-          const newDecl = postcss.decl({
+          const newDecl = postcss2.decl({
             prop,
             value,
             raws: { semicolon: true }
@@ -1577,8 +1920,16 @@ function updateCssVarsPluginV4(cssVars) {
           const existingDecl = ruleNode?.nodes.find(
             (node) => node.type === "decl" && node.prop === prop
           );
-          if (!existingDecl) {
-            ruleNode?.append(newDecl);
+          if (options.overwriteCssVars) {
+            if (existingDecl) {
+              existingDecl.replaceWith(newDecl);
+            } else {
+              ruleNode?.append(newDecl);
+            }
+          } else {
+            if (!existingDecl) {
+              ruleNode?.append(newDecl);
+            }
           }
         });
       });
@@ -1616,7 +1967,7 @@ function updateThemePlugin(cssVars) {
             xl: "calc(var(--radius) + 4px)"
           };
           for (const [key, value2] of Object.entries(radiusVariables)) {
-            const cssVarNode2 = postcss.decl({
+            const cssVarNode2 = postcss2.decl({
               prop: `--radius-${key}`,
               value: value2,
               raws: { semicolon: true }
@@ -1638,7 +1989,7 @@ function updateThemePlugin(cssVars) {
         if (prop === "--color-sidebar") {
           propValue = "var(--sidebar)";
         }
-        const cssVarNode = postcss.decl({
+        const cssVarNode = postcss2.decl({
           prop,
           value: propValue,
           raws: { semicolon: true }
@@ -1665,14 +2016,14 @@ function upsertThemeNode(root) {
     (node) => node.type === "atrule" && node.name === "theme" && node.params === "inline"
   );
   if (!themeNode) {
-    themeNode = postcss.atRule({
+    themeNode = postcss2.atRule({
       name: "theme",
       params: "inline",
       nodes: [],
       raws: { semicolon: true, between: " ", before: "\n" }
     });
     root.append(themeNode);
-    root.insertBefore(themeNode, postcss.comment({ text: "---break---" }));
+    root.insertBefore(themeNode, postcss2.comment({ text: "---break---" }));
   }
   return themeNode;
 }
@@ -1684,13 +2035,57 @@ function addCustomVariant({ params }) {
         (node) => node.type === "atrule" && node.name === "custom-variant"
       );
       if (!customVariant) {
-        const variantNode = postcss.atRule({
+        const importNodes = root.nodes.filter(
+          (node) => node.type === "atrule" && node.name === "import"
+        );
+        const variantNode = postcss2.atRule({
           name: "custom-variant",
           params,
           raws: { semicolon: true, before: "\n" }
         });
-        root.insertAfter(root.nodes[0], variantNode);
-        root.insertBefore(variantNode, postcss.comment({ text: "---break---" }));
+        if (importNodes.length > 0) {
+          const lastImport = importNodes[importNodes.length - 1];
+          root.insertAfter(lastImport, variantNode);
+        } else {
+          root.insertAfter(root.nodes[0], variantNode);
+        }
+        root.insertBefore(variantNode, postcss2.comment({ text: "---break---" }));
+      }
+    }
+  };
+}
+function addCustomImport({ params }) {
+  return {
+    postcssPlugin: "add-custom-import",
+    Once(root) {
+      const importNodes = root.nodes.filter(
+        (node) => node.type === "atrule" && node.name === "import"
+      );
+      const customVariantNode = root.nodes.find(
+        (node) => node.type === "atrule" && node.name === "custom-variant"
+      );
+      const hasImport = importNodes.some(
+        (node) => node.params.replace(/["']/g, "") === params
+      );
+      if (!hasImport) {
+        const importNode = postcss2.atRule({
+          name: "import",
+          params: `"${params}"`,
+          raws: { semicolon: true, before: "\n" }
+        });
+        if (importNodes.length > 0) {
+          const lastImport = importNodes[importNodes.length - 1];
+          root.insertAfter(lastImport, importNode);
+        } else if (customVariantNode) {
+          root.insertBefore(customVariantNode, importNode);
+          root.insertBefore(
+            customVariantNode,
+            postcss2.comment({ text: "---break---" })
+          );
+        } else {
+          root.prepend(importNode);
+          root.insertAfter(importNode, postcss2.comment({ text: "---break---" }));
+        }
       }
     }
   };
@@ -1715,13 +2110,13 @@ function updateTailwindConfigPlugin(tailwindConfig) {
         })) {
           continue;
         }
-        const pluginNode = postcss.atRule({
+        const pluginNode = postcss2.atRule({
           name: "plugin",
           params: `${quote}${pluginName}${quote}`,
           raws: { semicolon: true, before: "\n" }
         });
         root.insertAfter(lastPluginNode, pluginNode);
-        root.insertBefore(pluginNode, postcss.comment({ text: "---break---" }));
+        root.insertBefore(pluginNode, postcss2.comment({ text: "---break---" }));
       }
     }
   };
@@ -1756,17 +2151,17 @@ function updateTailwindConfigKeyframesPlugin(tailwindConfig) {
         )) {
           continue;
         }
-        const keyframeNode = postcss.atRule({
+        const keyframeNode = postcss2.atRule({
           name: "keyframes",
           params: keyframeName,
           nodes: [],
           raws: { semicolon: true, between: " ", before: "\n  " }
         });
         for (const [key, values] of Object.entries(parsedKeyframeValue.data)) {
-          const rule = postcss.rule({
+          const rule = postcss2.rule({
             selector: key,
             nodes: Object.entries(values).map(
-              ([key2, value]) => postcss.decl({
+              ([key2, value]) => postcss2.decl({
                 prop: key2,
                 value,
                 raws: { semicolon: true, before: "\n      ", between: ": " }
@@ -1779,7 +2174,7 @@ function updateTailwindConfigKeyframesPlugin(tailwindConfig) {
         themeNode.append(keyframeNode);
         themeNode.insertBefore(
           keyframeNode,
-          postcss.comment({ text: "---break---" })
+          postcss2.comment({ text: "---break---" })
         );
       }
     }
@@ -1807,7 +2202,7 @@ function updateTailwindConfigAnimationPlugin(tailwindConfig) {
         )) {
           continue;
         }
-        const animationNode = postcss.decl({
+        const animationNode = postcss2.decl({
           prop,
           value,
           raws: { semicolon: true, between: ": ", before: "\n  " }
@@ -1854,7 +2249,7 @@ async function updateDependencies(dependencies, config, options) {
 }
 
 // src/utils/updaters/update-files.ts
-import { existsSync, promises as fs6 } from "node:fs";
+import { existsSync, promises as fs7 } from "node:fs";
 import { tmpdir as tmpdir2 } from "node:os";
 
 // src/utils/transformers/transform-css-vars.ts
@@ -1869,12 +2264,12 @@ function transformCssVars2(opts) {
         return transformCount;
       for (const scriptAST of scriptASTs) {
         traverseScriptAST(scriptAST, {
-          visitLiteral(path17) {
-            if (path17.parent.value.type !== "ImportDeclaration" && typeof path17.node.value === "string") {
-              path17.node.value = applyColorMapping(path17.node.value.replace(/"/g, ""), baseColor.inlineColors);
+          visitLiteral(path20) {
+            if (path20.parent.value.type !== "ImportDeclaration" && typeof path20.node.value === "string") {
+              path20.node.value = applyColorMapping(path20.node.value.replace(/"/g, ""), baseColor.inlineColors);
               transformCount++;
             }
-            return this.traverse(path17);
+            return this.traverse(path20);
           }
         });
       }
@@ -1955,25 +2350,25 @@ function transformImport(opts) {
       const { config } = opts;
       for (const scriptAST of scriptASTs) {
         traverseScriptAST(scriptAST, {
-          visitImportDeclaration(path17) {
-            if (typeof path17.node.source.value === "string") {
-              const sourcePath = path17.node.source.value;
+          visitImportDeclaration(path20) {
+            if (typeof path20.node.source.value === "string") {
+              const sourcePath = path20.node.source.value;
               if (sourcePath.startsWith("@/registry/")) {
                 if (config.aliases.ui) {
-                  path17.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui);
+                  path20.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui);
                 } else {
-                  path17.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+/, config.aliases.components);
+                  path20.node.source.value = sourcePath.replace(/^@\/registry\/[^/]+/, config.aliases.components);
                 }
               }
               if (sourcePath === "@/lib/utils") {
-                const namedImports = path17.node.specifiers?.map((node) => node.local?.name ?? "") ?? [];
+                const namedImports = path20.node.specifiers?.map((node) => node.local?.name ?? "") ?? [];
                 const cnImport = namedImports.find((i) => i === "cn");
                 if (cnImport) {
-                  path17.node.source.value = sourcePath.replace(/^@\/lib\/utils/, config.aliases.utils);
+                  path20.node.source.value = sourcePath.replace(/^@\/lib\/utils/, config.aliases.utils);
                 }
               }
             }
-            return this.traverse(path17);
+            return this.traverse(path20);
           }
         });
       }
@@ -2011,9 +2406,9 @@ function transformTwPrefix(opts) {
         return transformCount;
       for (const scriptAST of scriptASTs) {
         traverseScriptAST(scriptAST, {
-          visitCallExpression(path17) {
-            if (path17.node.callee.type === "Identifier" && path17.node.callee.name === "cva") {
-              const nodes = path17.node.arguments;
+          visitCallExpression(path20) {
+            if (path20.node.callee.type === "Identifier" && path20.node.callee.name === "cva") {
+              const nodes = path20.node.arguments;
               nodes.forEach((node) => {
                 if (node.type === "Literal" && typeof node.value === "string") {
                   node.value = applyPrefix(node.value, config.tailwind.prefix);
@@ -2033,7 +2428,7 @@ function transformTwPrefix(opts) {
                 }
               });
             }
-            return this.traverse(path17);
+            return this.traverse(path20);
           }
         });
       }
@@ -2118,10 +2513,10 @@ function transformIcons(opts, registryIcons) {
       const targetedIconsMap = /* @__PURE__ */ new Map();
       for (const scriptAST of scriptASTs) {
         traverseScriptAST(scriptAST, {
-          visitImportDeclaration(path17) {
-            if (![ICON_LIBRARIES.radix.import, ICON_LIBRARIES.lucide.import].includes(`${path17.node.source.value}`))
-              return this.traverse(path17);
-            for (const specifier of path17.node.specifiers ?? []) {
+          visitImportDeclaration(path20) {
+            if (![ICON_LIBRARIES.radix.import, ICON_LIBRARIES.lucide.import].includes(`${path20.node.source.value}`))
+              return this.traverse(path20);
+            for (const specifier of path20.node.specifiers ?? []) {
               if (specifier.type === "ImportSpecifier") {
                 const iconName = specifier.imported.name;
                 const targetedIcon = registryIcons[iconName]?.[targetLibrary];
@@ -2133,8 +2528,8 @@ function transformIcons(opts, registryIcons) {
               }
             }
             if (targetedIconsMap.size > 0)
-              path17.node.source.value = ICON_LIBRARIES[targetLibrary].import;
-            return this.traverse(path17);
+              path20.node.source.value = ICON_LIBRARIES[targetLibrary].import;
+            return this.traverse(path20);
           }
         });
         if (sfcAST) {
@@ -2166,13 +2561,13 @@ async function transform2(opts) {
 }
 
 // src/utils/updaters/update-files.ts
-import path8, { basename, dirname } from "pathe";
+import path9, { basename, dirname } from "pathe";
 import prompts from "prompts";
 function resolveTargetDir(projectInfo, config, target) {
   if (target.startsWith("~/")) {
-    return path8.join(config.resolvedPaths.cwd, target.replace("~/", ""));
+    return path9.join(config.resolvedPaths.cwd, target.replace("~/", ""));
   }
-  return path8.join(config.resolvedPaths.cwd, target);
+  return path9.join(config.resolvedPaths.cwd, target);
 }
 async function updateFiles(files, config, options) {
   if (!files?.length) {
@@ -2201,15 +2596,15 @@ async function updateFiles(files, config, options) {
       if (!file.content) {
         continue;
       }
-      const dirName = path8.dirname(file.path);
-      tempRoot = path8.join(tmpdir2(), "shadcn-vue");
-      const tempDir = path8.join(tempRoot, "registry", config.style, dirName);
-      const tempPath = path8.join(tempRoot, "registry", config.style, file.path);
-      await fs6.mkdir(tempDir, { recursive: true });
-      await fs6.writeFile(tempPath, file.content, "utf-8");
+      const dirName = path9.dirname(file.path);
+      tempRoot = path9.join(tmpdir2(), "shadcn-vue");
+      const tempDir = path9.join(tempRoot, "registry", config.style, dirName);
+      const tempPath = path9.join(tempRoot, "registry", config.style, file.path);
+      await fs7.mkdir(tempDir, { recursive: true });
+      await fs7.writeFile(tempPath, file.content, "utf-8");
     }
-    await fs6.cp(path8.join(process.cwd(), "node_modules"), tempRoot, { recursive: true });
-    await fs6.writeFile(path8.join(tempRoot, "tsconfig.json"), `{
+    await fs7.cp(path9.join(process.cwd(), "node_modules"), tempRoot, { recursive: true });
+    await fs7.writeFile(path9.join(tempRoot, "tsconfig.json"), `{
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -2226,10 +2621,10 @@ async function updateFiles(files, config, options) {
     }
     let targetDir = getRegistryItemFileTargetPath(file, config);
     const fileName = basename(file.path);
-    let filePath = path8.join(targetDir, fileName);
+    let filePath = path9.join(targetDir, fileName);
     if (file.target) {
       filePath = resolveTargetDir(projectInfo, config, file.target);
-      targetDir = path8.dirname(filePath);
+      targetDir = path9.dirname(filePath);
     }
     if (!config.typescript) {
       filePath = filePath.replace(/\.ts?$/, (match) => ".js");
@@ -2253,7 +2648,7 @@ async function updateFiles(files, config, options) {
         filesCreatedSpinner?.start();
       }
       if (folderSkipped.get(folderName) === true) {
-        filesSkipped.push(path8.relative(config.resolvedPaths.cwd, filePath));
+        filesSkipped.push(path9.relative(config.resolvedPaths.cwd, filePath));
         continue;
       }
     } else {
@@ -2268,26 +2663,26 @@ async function updateFiles(files, config, options) {
           initial: false
         });
         if (!overwrite) {
-          filesSkipped.push(path8.relative(config.resolvedPaths.cwd, filePath));
+          filesSkipped.push(path9.relative(config.resolvedPaths.cwd, filePath));
           continue;
         }
         filesCreatedSpinner?.start();
       }
     }
     if (!existsSync(targetDir)) {
-      await fs6.mkdir(targetDir, { recursive: true });
+      await fs7.mkdir(targetDir, { recursive: true });
     }
     const content = await transform2({
-      filename: path8.join(tempRoot, "registry", config.style, file.path),
+      filename: path9.join(tempRoot, "registry", config.style, file.path),
       raw: file.content,
       config,
       baseColor
     });
-    await fs6.writeFile(filePath, content, "utf-8");
-    existingFile ? filesUpdated.push(path8.relative(config.resolvedPaths.cwd, filePath)) : filesCreated.push(path8.relative(config.resolvedPaths.cwd, filePath));
+    await fs7.writeFile(filePath, content, "utf-8");
+    existingFile ? filesUpdated.push(path9.relative(config.resolvedPaths.cwd, filePath)) : filesCreated.push(path9.relative(config.resolvedPaths.cwd, filePath));
   }
   if (tempRoot) {
-    await fs6.rm(tempRoot, { recursive: true });
+    await fs7.rm(tempRoot, { recursive: true });
   }
   const hasUpdatedFiles = filesCreated.length || filesUpdated.length;
   if (!hasUpdatedFiles && !filesSkipped.length) {
@@ -2337,11 +2732,13 @@ async function updateFiles(files, config, options) {
 }
 
 // src/utils/add-components.ts
+import { z as z6 } from "zod";
 async function addComponents(components, config, options) {
   options = {
     overwrite: false,
     silent: false,
     isNewProject: false,
+    style: "index",
     ...options
   };
   return await addProjectComponents(components, config, options);
@@ -2361,11 +2758,17 @@ async function addProjectComponents(components, config, options) {
     silent: options.silent,
     tailwindVersion
   });
+  const overwriteCssVars = await shouldOverwriteCssVars(components, config);
   await updateCssVars(tree.cssVars, config, {
     cleanupDefaultNextStyles: options.isNewProject,
     silent: options.silent,
     tailwindVersion,
-    tailwindConfig: tree.tailwind?.config
+    tailwindConfig: tree.tailwind?.config,
+    overwriteCssVars,
+    initIndex: options.style ? options.style === "index" : false
+  });
+  await updateCss(tree.css, config, {
+    silent: options.silent
   });
   await updateDependencies(tree.dependencies, config, {
     silent: options.silent
@@ -2378,10 +2781,18 @@ async function addProjectComponents(components, config, options) {
     logger.info(tree.docs);
   }
 }
+async function shouldOverwriteCssVars(components, config) {
+  const registryItems = await resolveRegistryItems(components, config);
+  const result = await fetchRegistry(registryItems);
+  const payload = z6.array(registryItemSchema).parse(result);
+  return payload.some(
+    (component) => component.type === "registry:theme" || component.type === "registry:style"
+  );
+}
 
 // src/utils/updaters/update-tailwind-content.ts
-import { promises as fs7 } from "node:fs";
-import path9 from "pathe";
+import { promises as fs8 } from "node:fs";
+import path10 from "pathe";
 import { SyntaxKind as SyntaxKind2 } from "ts-morph";
 async function updateTailwindContent(content, config, options) {
   if (!content) {
@@ -2391,7 +2802,7 @@ async function updateTailwindContent(content, config, options) {
     silent: false,
     ...options
   };
-  const tailwindFileRelativePath = path9.relative(
+  const tailwindFileRelativePath = path10.relative(
     config.resolvedPaths.cwd,
     config.resolvedPaths.tailwindConfig
   );
@@ -2401,9 +2812,9 @@ async function updateTailwindContent(content, config, options) {
       silent: options.silent
     }
   ).start();
-  const raw = await fs7.readFile(config.resolvedPaths.tailwindConfig, "utf8");
+  const raw = await fs8.readFile(config.resolvedPaths.tailwindConfig, "utf8");
   const output = await transformTailwindContent(raw, content, config);
-  await fs7.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8");
+  await fs8.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8");
   tailwindSpinner?.succeed();
 }
 async function transformTailwindContent(input, content, config) {
@@ -2450,20 +2861,20 @@ async function addTailwindConfigContent(configObject, content) {
 
 // src/commands/init.ts
 import { Command } from "commander";
-import path10 from "pathe";
+import path11 from "pathe";
 import prompts2 from "prompts";
-import { z as z6 } from "zod";
-var initOptionsSchema = z6.object({
-  cwd: z6.string(),
-  components: z6.array(z6.string()).optional(),
-  yes: z6.boolean(),
-  defaults: z6.boolean(),
-  force: z6.boolean(),
-  silent: z6.boolean(),
-  isNewProject: z6.boolean(),
-  srcDir: z6.boolean().optional(),
-  cssVariables: z6.boolean(),
-  baseColor: z6.string().optional().refine(
+import { z as z7 } from "zod";
+var initOptionsSchema = z7.object({
+  cwd: z7.string(),
+  components: z7.array(z7.string()).optional(),
+  yes: z7.boolean(),
+  defaults: z7.boolean(),
+  force: z7.boolean(),
+  silent: z7.boolean(),
+  isNewProject: z7.boolean(),
+  srcDir: z7.boolean().optional(),
+  cssVariables: z7.boolean(),
+  baseColor: z7.string().optional().refine(
     (val) => {
       if (val) {
         return BASE_COLORS.find((color) => color.name === val);
@@ -2475,7 +2886,8 @@ var initOptionsSchema = z6.object({
         (color) => color.name
       ).join("', '")}'`
     }
-  )
+  ),
+  style: z7.string()
 });
 var init = new Command().name("init").description("initialize your project and install dependencies").argument(
   "[components...]",
@@ -2487,11 +2899,19 @@ var init = new Command().name("init").description("initialize your project and i
 ).option("-s, --silent", "mute output.", false).option("--css-variables", "use css variables for theming.", true).option("--no-css-variables", "do not use css variables for theming.").action(async (components, opts) => {
   try {
     const options = initOptionsSchema.parse({
-      cwd: path10.resolve(opts.cwd),
+      cwd: path11.resolve(opts.cwd),
       isNewProject: false,
       components,
+      style: "index",
       ...opts
     });
+    if (components.length > 0 && isUrl(components[0])) {
+      const item = await getRegistryItem(components[0], "");
+      if (item?.type === "registry:style") {
+        options.baseColor = "neutral";
+        options.style = item.extends ?? "index";
+      }
+    }
     await runInit(options);
     logger.log(
       `${highlighter.success(
@@ -2532,15 +2952,19 @@ async function runInit(options) {
     }
   }
   const componentSpinner = spinner(`Writing components.json.`).start();
-  const targetPath = path10.resolve(options.cwd, "components.json");
-  await fs8.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8");
+  const targetPath = path11.resolve(options.cwd, "components.json");
+  await fs9.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8");
   componentSpinner.succeed();
   const fullConfig = await resolveConfigPaths(options.cwd, config);
-  const components = ["index", ...options.components || []];
+  const components = [
+    ...options.style === "none" ? [] : [options.style],
+    ...options.components ?? []
+  ];
   await addComponents(components, fullConfig, {
     // Init will always overwrite files.
     overwrite: true,
     silent: options.silent,
+    style: options.style,
     isNewProject: options.isNewProject || projectInfo?.framework.name === "nuxt"
   });
   if (options.isNewProject && options.srcDir) {
@@ -2710,18 +3134,18 @@ async function promptForMinimalConfig(defaultConfig, opts) {
 }
 
 // src/preflights/preflight-add.ts
-import fs9 from "fs-extra";
-import path11 from "pathe";
+import fs10 from "fs-extra";
+import path12 from "pathe";
 async function preFlightAdd(options) {
   const errors = {};
-  if (!fs9.existsSync(options.cwd) || !fs9.existsSync(path11.resolve(options.cwd, "package.json"))) {
+  if (!fs10.existsSync(options.cwd) || !fs10.existsSync(path12.resolve(options.cwd, "package.json"))) {
     errors[MISSING_DIR_OR_EMPTY_PROJECT] = true;
     return {
       errors,
       config: null
     };
   }
-  if (!fs9.existsSync(path11.resolve(options.cwd, "components.json"))) {
+  if (!fs10.existsSync(path12.resolve(options.cwd, "components.json"))) {
     errors[MISSING_CONFIG] = true;
     return {
       errors,
@@ -2758,9 +3182,9 @@ Before you can add components, you must create a valid ${highlighter.info(
 
 // src/commands/add.ts
 import { Command as Command2 } from "commander";
-import path12 from "pathe";
+import path13 from "pathe";
 import prompts3 from "prompts";
-import { z as z7 } from "zod";
+import { z as z8 } from "zod";
 var DEPRECATED_COMPONENTS = [
   {
     name: "toast",
@@ -2773,16 +3197,16 @@ var DEPRECATED_COMPONENTS = [
     message: "The toaster component is deprecated. Use the sonner component instead."
   }
 ];
-var addOptionsSchema = z7.object({
-  components: z7.array(z7.string()).optional(),
-  yes: z7.boolean(),
-  overwrite: z7.boolean(),
-  cwd: z7.string(),
-  all: z7.boolean(),
-  path: z7.string().optional(),
-  silent: z7.boolean(),
-  srcDir: z7.boolean().optional(),
-  cssVariables: z7.boolean()
+var addOptionsSchema = z8.object({
+  components: z8.array(z8.string()).optional(),
+  yes: z8.boolean(),
+  overwrite: z8.boolean(),
+  cwd: z8.string(),
+  all: z8.boolean(),
+  path: z8.string().optional(),
+  silent: z8.boolean(),
+  srcDir: z8.boolean().optional(),
+  cssVariables: z8.boolean()
 });
 var add = new Command2().name("add").description("add a component to your project").argument(
   "[components...]",
@@ -2799,7 +3223,7 @@ var add = new Command2().name("add").description("add a component to your projec
   try {
     const options = addOptionsSchema.parse({
       components,
-      cwd: path12.resolve(opts.cwd),
+      cwd: path13.resolve(opts.cwd),
       ...opts
     });
     const isTheme = options.components?.some(
@@ -2861,7 +3285,8 @@ var add = new Command2().name("add").description("add a component to your projec
         silent: true,
         isNewProject: false,
         srcDir: options.srcDir,
-        cssVariables: options.cssVariables
+        cssVariables: options.cssVariables,
+        style: "index"
       });
     }
     if (!config) {
@@ -2911,7 +3336,7 @@ async function promptForRegistryComponents(options) {
     logger.info("");
     process.exit(1);
   }
-  const result = z7.array(z7.string()).safeParse(components);
+  const result = z8.array(z8.string()).safeParse(components);
   if (!result.success) {
     logger.error("");
     handleError(new Error("Something went wrong. Please try again."));
@@ -2920,19 +3345,123 @@ async function promptForRegistryComponents(options) {
   return result.data;
 }
 
-// src/commands/diff.ts
-import { existsSync as existsSync2, promises as fs10 } from "node:fs";
+// src/commands/build.ts
+import * as fs12 from "node:fs/promises";
+
+// src/preflights/preflight-build.ts
+import fs11 from "fs-extra";
+import path14 from "pathe";
+async function preFlightBuild(options) {
+  const errors = {};
+  const resolvePaths = {
+    cwd: options.cwd,
+    registryFile: path14.resolve(options.cwd, options.registryFile),
+    outputDir: path14.resolve(options.cwd, options.outputDir)
+  };
+  if (!fs11.existsSync(resolvePaths.registryFile)) {
+    errors[BUILD_MISSING_REGISTRY_FILE] = true;
+  }
+  await fs11.mkdir(resolvePaths.outputDir, { recursive: true });
+  if (Object.keys(errors).length > 0) {
+    if (errors[BUILD_MISSING_REGISTRY_FILE]) {
+      logger.break();
+      logger.error(
+        `The path ${highlighter.info(
+          resolvePaths.registryFile
+        )} does not exist.`
+      );
+    }
+    logger.break();
+    process.exit(1);
+  }
+  return {
+    errors,
+    resolvePaths
+  };
+}
+
+// src/commands/build.ts
 import { Command as Command3 } from "commander";
+import * as path15 from "pathe";
+import { z as z9 } from "zod";
+var buildOptionsSchema = z9.object({
+  cwd: z9.string(),
+  registryFile: z9.string(),
+  outputDir: z9.string()
+});
+var build = new Command3().name("build").description("build components for a shadcn registry").argument("[registry]", "path to registry.json file", "./registry.json").option(
+  "-o, --output <path>",
+  "destination directory for json files",
+  "./public/r"
+).option(
+  "-c, --cwd <cwd>",
+  "the working directory. defaults to the current directory.",
+  process.cwd()
+).action(async (registry, opts) => {
+  try {
+    const options = buildOptionsSchema.parse({
+      cwd: path15.resolve(opts.cwd),
+      registryFile: registry,
+      outputDir: opts.output
+    });
+    const { resolvePaths } = await preFlightBuild(options);
+    const content = await fs12.readFile(resolvePaths.registryFile, "utf-8");
+    const result = registrySchema.safeParse(JSON.parse(content));
+    if (!result.success) {
+      logger.error(
+        `Invalid registry file found at ${highlighter.info(
+          resolvePaths.registryFile
+        )}.`
+      );
+      process.exit(1);
+    }
+    const buildSpinner = spinner("Building registry...");
+    for (const registryItem of result.data.items) {
+      if (!registryItem.files) {
+        continue;
+      }
+      buildSpinner.start(`Building ${registryItem.name}...`);
+      registryItem.$schema = "https://shadcn-vue.com/schema/registry-item.json";
+      for (const file of registryItem.files) {
+        file.content = await fs12.readFile(
+          path15.resolve(resolvePaths.cwd, file.path),
+          "utf-8"
+        );
+      }
+      const result2 = registryItemSchema.safeParse(registryItem);
+      if (!result2.success) {
+        logger.error(
+          `Invalid registry item found for ${highlighter.info(
+            registryItem.name
+          )}.`
+        );
+        continue;
+      }
+      await fs12.writeFile(
+        path15.resolve(resolvePaths.outputDir, `${result2.data.name}.json`),
+        JSON.stringify(result2.data, null, 2)
+      );
+    }
+    buildSpinner.succeed("Building registry.");
+  } catch (error) {
+    logger.break();
+    handleError(error);
+  }
+});
+
+// src/commands/diff.ts
+import { existsSync as existsSync2, promises as fs13 } from "node:fs";
+import { Command as Command4 } from "commander";
 import { diffLines } from "diff";
-import path13 from "pathe";
-import { z as z8 } from "zod";
-var updateOptionsSchema = z8.object({
-  component: z8.string().optional(),
-  yes: z8.boolean(),
-  cwd: z8.string(),
-  path: z8.string().optional()
+import path16 from "pathe";
+import { z as z10 } from "zod";
+var updateOptionsSchema = z10.object({
+  component: z10.string().optional(),
+  yes: z10.boolean(),
+  cwd: z10.string(),
+  path: z10.string().optional()
 });
-var diff = new Command3().name("diff").description("check for updates against the registry").argument("[component]", "the component name").option("-y, --yes", "skip confirmation prompt.", false).option(
+var diff = new Command4().name("diff").description("check for updates against the registry").argument("[component]", "the component name").option("-y, --yes", "skip confirmation prompt.", false).option(
   "-c, --cwd <cwd>",
   "the working directory. defaults to the current directory.",
   process.cwd()
@@ -2942,7 +3471,7 @@ var diff = new Command3().name("diff").description("check for updates against th
       component: name,
       ...opts
     });
-    const cwd = path13.resolve(options.cwd);
+    const cwd = path16.resolve(options.cwd);
     if (!existsSync2(cwd)) {
       logger.error(`The path ${cwd} does not exist. Please try again.`);
       process.exit(1);
@@ -2965,7 +3494,7 @@ var diff = new Command3().name("diff").description("check for updates against th
       const targetDir = config.resolvedPaths.components;
       const projectComponents = registryIndex.filter((item) => {
         for (const file of item.files ?? []) {
-          const filePath = path13.resolve(
+          const filePath = path16.resolve(
             targetDir,
             typeof file === "string" ? file : file.path
           );
@@ -3040,14 +3569,14 @@ async function diffComponent(component, config) {
       continue;
     }
     for (const file of item.files ?? []) {
-      const filePath = path13.resolve(
+      const filePath = path16.resolve(
         targetDir,
         typeof file === "string" ? file : file.path
       );
       if (!existsSync2(filePath)) {
         continue;
       }
-      const fileContent = await fs10.readFile(filePath, "utf8");
+      const fileContent = await fs13.readFile(filePath, "utf8");
       if (typeof file === "string" || !file.content) {
         continue;
       }
@@ -3083,9 +3612,9 @@ async function printDiff(diff2) {
 }
 
 // src/commands/info.ts
-import { Command as Command4 } from "commander";
+import { Command as Command5 } from "commander";
 import consola3 from "consola";
-var info = new Command4().name("info").description("get information about your project").option(
+var info = new Command5().name("info").description("get information about your project").option(
   "-c, --cwd <cwd>",
   "the working directory. defaults to the current directory.",
   process.cwd()
@@ -3099,9 +3628,9 @@ var info = new Command4().name("info").description("get information about your p
 
 // src/migrations/migrate-icons.ts
 import { randomBytes } from "node:crypto";
-import { promises as fs11 } from "node:fs";
+import { promises as fs14 } from "node:fs";
 import { tmpdir as tmpdir3 } from "node:os";
-import path14 from "pathe";
+import path17 from "pathe";
 import prompts4 from "prompts";
 import { glob as glob2 } from "tinyglobby";
 import { Project as Project2, ScriptKind as ScriptKind2, SyntaxKind as SyntaxKind3 } from "ts-morph";
@@ -3162,7 +3691,7 @@ async function migrateIcons(config) {
     message: `We will migrate ${highlighter.info(
       files.length
     )} files in ${highlighter.info(
-      `./${path14.relative(config.resolvedPaths.cwd, uiPath)}`
+      `./${path17.relative(config.resolvedPaths.cwd, uiPath)}`
     )} from ${highlighter.info(sourceLibrary.name)} to ${highlighter.info(
       targetLibrary.name
     )}. Continue?`
@@ -3180,15 +3709,15 @@ async function migrateIcons(config) {
   await Promise.all(
     files.map(async (file) => {
       migrationSpinner.text = `Migrating ${file}...`;
-      const filePath = path14.join(uiPath, file);
-      const fileContent = await fs11.readFile(filePath, "utf-8");
+      const filePath = path17.join(uiPath, file);
+      const fileContent = await fs14.readFile(filePath, "utf-8");
       const content = await migrateIconsFile(
         fileContent,
         migrateOptions.sourceLibrary,
         migrateOptions.targetLibrary,
         registryIcons
       );
-      await fs11.writeFile(filePath, content);
+      await fs14.writeFile(filePath, content);
     })
   );
   migrationSpinner.succeed("Migration complete.");
@@ -3196,11 +3725,11 @@ async function migrateIcons(config) {
 async function migrateIconsFile(content, sourceLibrary, targetLibrary, iconsMapping) {
   const sourceLibraryImport = ICON_LIBRARIES[sourceLibrary]?.import;
   const targetLibraryImport = ICON_LIBRARIES[targetLibrary]?.import;
-  const dir = await fs11.mkdtemp(path14.join(tmpdir3(), "shadcn-"));
+  const dir = await fs14.mkdtemp(path17.join(tmpdir3(), "shadcn-"));
   const project = new Project2({
     compilerOptions: {}
   });
-  const tempFile = path14.join(
+  const tempFile = path17.join(
     dir,
     `shadcn-icons-${randomBytes(4).toString("hex")}.tsx`
   );
@@ -3240,18 +3769,18 @@ async function migrateIconsFile(content, sourceLibrary, targetLibrary, iconsMapp
 }
 
 // src/preflights/preflight-migrate.ts
-import fs12 from "fs-extra";
-import path15 from "pathe";
+import fs15 from "fs-extra";
+import path18 from "pathe";
 async function preFlightMigrate(options) {
   const errors = {};
-  if (!fs12.existsSync(options.cwd) || !fs12.existsSync(path15.resolve(options.cwd, "package.json"))) {
+  if (!fs15.existsSync(options.cwd) || !fs15.existsSync(path18.resolve(options.cwd, "package.json"))) {
     errors[MISSING_DIR_OR_EMPTY_PROJECT] = true;
     return {
       errors,
       config: null
     };
   }
-  if (!fs12.existsSync(path15.resolve(options.cwd, "components.json"))) {
+  if (!fs15.existsSync(path18.resolve(options.cwd, "components.json"))) {
     errors[MISSING_CONFIG] = true;
     return {
       errors,
@@ -3287,34 +3816,34 @@ Before you can run a migration, you must create a valid ${highlighter.info(
 }
 
 // src/commands/migrate.ts
-import { Command as Command5 } from "commander";
+import { Command as Command6 } from "commander";
 import consola4 from "consola";
-import path16 from "pathe";
-import { z as z9 } from "zod";
+import path19 from "pathe";
+import { z as z11 } from "zod";
 var migrations = [
   {
     name: "icons",
     description: "migrate your ui components to a different icon library."
   }
 ];
-var migrateOptionsSchema = z9.object({
-  cwd: z9.string(),
-  list: z9.boolean(),
-  migration: z9.string().refine(
+var migrateOptionsSchema = z11.object({
+  cwd: z11.string(),
+  list: z11.boolean(),
+  migration: z11.string().refine(
     (value) => value && migrations.some((migration) => migration.name === value),
     {
       message: "You must specify a valid migration. Run `shadcn migrate --list` to see available migrations."
     }
   ).optional()
 });
-var migrate = new Command5().name("migrate").description("run a migration.").argument("[migration]", "the migration to run.").option(
+var migrate = new Command6().name("migrate").description("run a migration.").argument("[migration]", "the migration to run.").option(
   "-c, --cwd <cwd>",
   "the working directory. defaults to the current directory.",
   process.cwd()
 ).option("-l, --list", "list all migrations.", false).action(async (migration, opts) => {
   try {
     const options = migrateOptionsSchema.parse({
-      cwd: path16.resolve(opts.cwd),
+      cwd: path19.resolve(opts.cwd),
       migration,
       list: opts.list
     });
@@ -3350,13 +3879,13 @@ var migrate = new Command5().name("migrate").description("run a migration.").arg
 });
 
 // src/index.ts
-import { Command as Command6 } from "commander";
+import { Command as Command7 } from "commander";
 
 // package.json
 var package_default = {
   name: "shadcn-vue",
   type: "module",
-  version: "2.0.0",
+  version: "2.0.1",
   description: "Add components to your apps.",
   publishConfig: {
     access: "public"
@@ -3441,6 +3970,7 @@ var package_default = {
     "@types/node": "^22.13.4",
     "@types/prompts": "^2.4.9",
     "@types/stringify-object": "^4.0.5",
+    msw: "^2.7.3",
     tsup: "^8.3.6",
     "type-fest": "^4.34.1",
     typescript: "catalog:"
@@ -3451,12 +3981,12 @@ var package_default = {
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
 async function main() {
-  const program = new Command6().name("shadcn-vue").description("add components and dependencies to your project").version(
+  const program = new Command7().name("shadcn-vue").description("add components and dependencies to your project").version(
     package_default.version || "1.0.0",
     "-v, --version",
     "display the version number"
   );
-  program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate).addCommand(info);
+  program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate).addCommand(info).addCommand(build);
   program.parse();
 }
 main();