addProjectComponents() — ui Function Reference

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

Function typescript FrameworkTooling CLICore calls 2 called by 1

Entity Profile

FrameworkTooling→ CLICore→ addProjectComponents() — ui Function Reference

Dependency Diagram

graph TD
  fdd9197d_b14e_a97e_a1a7_e1ef82de0896["addProjectComponents()"]
  05e0e857_0905_dce0_82c9_cfde160573bd["add-components.ts"]
  fdd9197d_b14e_a97e_a1a7_e1ef82de0896 -->|defined in| 05e0e857_0905_dce0_82c9_cfde160573bd
  078f2672_34c7_86ae_f39e_4a5df4f1125b["addComponents()"]
  078f2672_34c7_86ae_f39e_4a5df4f1125b -->|calls| fdd9197d_b14e_a97e_a1a7_e1ef82de0896
  58ead2f7_5adf_4a2b_b233_e9e4c09b8dfa["validateFilesTarget()"]
  fdd9197d_b14e_a97e_a1a7_e1ef82de0896 -->|calls| 58ead2f7_5adf_4a2b_b233_e9e4c09b8dfa
  dc15e41b_4f30_ca83_54b7_b32524184c67["shouldOverwriteCssVars()"]
  fdd9197d_b14e_a97e_a1a7_e1ef82de0896 -->|calls| dc15e41b_4f30_ca83_54b7_b32524184c67
  style fdd9197d_b14e_a97e_a1a7_e1ef82de0896 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/add-components.ts lines 70–149

async function addProjectComponents(
  components: string[],
  config: z.infer<typeof configSchema>,
  options: {
    overwrite?: boolean
    silent?: boolean
    isNewProject?: boolean
    baseStyle?: boolean
    path?: string
  }
) {
  if (!options.baseStyle && !components.length) {
    return
  }

  const registrySpinner = spinner(`Checking registry.`, {
    silent: options.silent,
  })?.start()
  let tree = await resolveRegistryTree(components, configWithDefaults(config))

  if (!tree) {
    registrySpinner?.fail()
    return handleError(new Error("Failed to fetch components from registry."))
  }

  try {
    validateFilesTarget(tree.files ?? [], config.resolvedPaths.cwd)
  } catch (error) {
    registrySpinner?.fail()
    return handleError(error)
  }

  registrySpinner?.succeed()

  const tailwindVersion = await getProjectTailwindVersionFromConfig(config)

  tree = await massageTreeForFonts(tree, config)

  await updateTailwindConfig(tree.tailwind?.config, config, {
    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,
    overwriteCssVars,
    initIndex: options.baseStyle,
  })

  // Add CSS updater
  await updateCss(tree.css, config, {
    silent: options.silent,
  })

  await updateEnvVars(tree.envVars, config, {
    silent: options.silent,
  })

  await updateDependencies(tree.dependencies, tree.devDependencies, config, {
    silent: options.silent,
  })

  await updateFonts(tree.fonts, config, {
    silent: options.silent,
  })

  await updateFiles(tree.files, config, {
    overwrite: options.overwrite,
    silent: options.silent,
    path: options.path,
  })

  if (tree.docs) {
    logger.info(tree.docs)
  }
}