addWorkspaceComponents() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 2 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ addWorkspaceComponents() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/shadcn/src/utils/add-components.ts lines 151–377

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

  const registrySpinner = spinner(`Checking registry.`, {
    silent: options.silent,
  })?.start()
  const 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 filesCreated: string[] = []
  const filesUpdated: string[] = []
  const filesSkipped: string[] = []

  const rootSpinner = spinner(`Installing components.`)?.start()

  // Process global updates (tailwind, css vars, dependencies) first for the main target.
  // These should typically go to the UI package in a workspace.
  const mainTargetConfig = workspaceConfig.ui
  const tailwindVersion = await getProjectTailwindVersionFromConfig(
    mainTargetConfig
  )
  const workspaceRoot = findCommonRoot(
    config.resolvedPaths.cwd,
    mainTargetConfig.resolvedPaths.ui
  )

  // 1. Update tailwind config.
  if (tree.tailwind?.config) {
    await updateTailwindConfig(tree.tailwind?.config, mainTargetConfig, {
      silent: true,
      tailwindVersion,
    })
    filesUpdated.push(
      path.relative(
        workspaceRoot,
        mainTargetConfig.resolvedPaths.tailwindConfig
      )
    )
  }

  // 2. Update css vars.
  if (tree.cssVars) {
    const overwriteCssVars = await shouldOverwriteCssVars(components, config)
    await updateCssVars(tree.cssVars, mainTargetConfig, {
      silent: true,
      tailwindVersion,
      tailwindConfig: tree.tailwind?.config,
      overwriteCssVars,
    })
    filesUpdated.push(
      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
    )
  }