Blog

shadcn-ui/ui codebase analysis-How does shadcn-ui CLI work? — Part 3.1

I wanted to find out how shadcn-ui CLI works. In this article, I discuss the code used to build the shadcn-ui/ui CLI.

In part 3.0, I discussed how npx shadcn-ui add <component> command is registered. We will look at few more lines of code from packages/cli/src/commands/add.ts.

const cwd = path.resolve(options.cwd)

if (!existsSync(cwd)) {
  logger.error(`The path ${cwd} does not exist. Please try again.`)
  process.exit(1)
}

const config = await getConfig(cwd)
if (!config) {
  logger.warn(
    `Configuration is missing. Please run ${chalk.green(
      `init`
    )} to create a components.json file.`
  )
  process.exit(1)
}

const registryIndex = await getRegistryIndex()

So what’s happening in the above code snippet?

Check if the cwd exists.
getConfig function.
getRegistryIndex.

Check if the cwd exists.

This code checks the current directory exists and logs an error if it doesn’t.

existsSync is imported from “fs” at the top of add.ts file.

getConfig function

getConfig is not as simple as it looks like.

const config = await getConfig(cwd)
if (!config) {
  logger.warn(
    `Configuration is missing. Please run ${chalk.green(
      `init`
    )} to create a components.json file.`
  )
  process.exit(1)
}

getConfig is imported from a different file named get-config. Reason behind this could be that context matters when it comes where you place your function. For example, logically, a function named getConfig can never be placed in a file named get-project-info.

export async function getConfig(cwd: string) {
  const config = await getRawConfig(cwd)

  if (!config) {
    return null
  }

  return await resolveConfigPaths(cwd, config)
}

This function calls another function named getRawConfig.

I explained in great detail how getConfig works in the article Part 2.2

getRegistryIndex

export async function getRegistryIndex() {
  try {
    const [result] = await fetchRegistry(["index.json"])

    return registryIndexSchema.parse(result)
  } catch (error) {
    throw new Error(`Failed to fetch components from registry.`)
  }
}

A simple utility function that fetches index.json available at https://ui.shadcn.com/registry/index.json

Conclusion:

Once the options and the argument passed to add command in shadcn-ui CLI, In the action, there is a lot of code, about 218 lines in add.ts. I picked a few lines of code that followed part 3.0 explanation and discussed about

Check if the cwd exists.

This code checks the current directory exists and logs an error if it doesn’t.

existsSync is imported from “fs” at the top of add.ts file.

2. getConfig function.

I explained in great detail how getConfig works in the article Part 2.2

3. getRegistryIndex.

A simple utility function that fetches index.json available at https://ui.shadcn.com/registry/index.json

Get free courses inspired by the best practices used in open source.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

Insights from Open Source projects

Best practices used in open-source are explained, compared among multiple projects.

Study the codebase architecture and level up your skills.