add() — ui Function Reference

Architecture documentation for the add() function in add.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync calls 1

Entity Profile

FrameworkTooling→ TemplateSync→ add() — ui Function Reference

Dependency Diagram

graph TD
  08918f28_2fda_4709_8ae2_ccf20fead04e["add()"]
  bcd87158_201e_8041_38a6_f566a96d459f["add.ts"]
  08918f28_2fda_4709_8ae2_ccf20fead04e -->|defined in| bcd87158_201e_8041_38a6_f566a96d459f
  f06982e8_5ef0_e553_ffbe_a4189b216d87["promptForRegistryComponents()"]
  08918f28_2fda_4709_8ae2_ccf20fead04e -->|calls| f06982e8_5ef0_e553_ffbe_a4189b216d87
  style 08918f28_2fda_4709_8ae2_ccf20fead04e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/commands/add.ts lines 61–264

  .action(async (components, opts) => {
    try {
      const options = addOptionsSchema.parse({
        components,
        cwd: path.resolve(opts.cwd),
        ...opts,
      })

      await loadEnvFiles(options.cwd)

      let initialConfig = await getConfig(options.cwd)
      if (!initialConfig) {
        initialConfig = createConfig({
          style: "new-york",
          resolvedPaths: {
            cwd: options.cwd,
          },
        })
      }

      let hasNewRegistries = false
      if (components.length > 0) {
        const { config: updatedConfig, newRegistries } =
          await ensureRegistriesInConfig(components, initialConfig, {
            silent: options.silent,
            writeFile: false,
          })
        initialConfig = updatedConfig
        hasNewRegistries = newRegistries.length > 0
      }

      let itemType: z.infer<typeof registryItemTypeSchema> | undefined
      let shouldInstallBaseStyle = true
      if (components.length > 0) {
        const [registryItem] = await getRegistryItems([components[0]], {
          config: initialConfig,
        })
        itemType = registryItem?.type
        shouldInstallBaseStyle =
          itemType !== "registry:theme" && itemType !== "registry:style"

        if (isUniversalRegistryItem(registryItem)) {
          await addComponents(components, initialConfig, {
            ...options,
            baseStyle: shouldInstallBaseStyle,
          })
          return
        }

        if (
          !options.yes &&
          (itemType === "registry:style" || itemType === "registry:theme")
        ) {
          logger.break()
          const { confirm } = await prompts({
            type: "confirm",
            name: "confirm",
            message: highlighter.warn(
              `You are about to install a new ${itemType.replace(
                "registry:",
                ""
              )}. \nExisting CSS variables and components will be overwritten. Continue?`
            ),
          })
          if (!confirm) {
            logger.break()
            logger.log(`Installation cancelled.`)
            logger.break()
            process.exit(1)
          }
        }
      }

      if (!options.components?.length) {
        options.components = await promptForRegistryComponents(options)
      }

      const projectInfo = await getProjectInfo(options.cwd)
      if (projectInfo?.tailwindVersion === "v4") {
        const deprecatedComponents = DEPRECATED_COMPONENTS.filter((component) =>
          options.components?.includes(component.name)