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 2.11, we looked at runInit function and how shadcn-ui/ui ensures directories provided in resolvedPaths in config exist.

The following operations are performed in runInit function:

1. Ensure all resolved paths directories exist.
2. Write tailwind config.
3. Write css file.
4. Write cn file.
5. Install dependencies.

1, 2, 3, 4 from the above are covered in part 2.12, 2.13 and 2.14, let’s find out how “Install dependencies” operation is done.

Install dependencies

The below code snippet is picked from cli/src/commands/init.ts

// Install dependencies.
const dependenciesSpinner = ora(\`Installing dependencies...\`)?.start()
const packageManager = await getPackageManager(cwd)

// TODO: add support for other icon libraries.
const deps = \[
  ...PROJECT\_DEPENDENCIES,
  config.style === "new-york" ? "@radix-ui/react-icons" : "lucide-react",
\]

await execa(
  packageManager,
  \[packageManager === "npm" ? "install" : "add", ...deps\],
  {
    cwd,
  }
)
dependenciesSpinner?.succeed()

ora is an elegant terminal spinner and is used to show the message “Installing dependencies…” when you run the npx shadcn init command.

getPackageManager

getPackageManager is imported packages/cli/src/utils/get-package-manager.ts

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise {
  const packageManager = await detect({ programmatic: true, cwd: targetDir })

  if (packageManager === "yarn@berry") return "yarn"
  if (packageManager === "pnpm@6") return "pnpm"
  if (packageManager === "bun") return "bun"

  return packageManager ?? "npm"
}

Have you ever used npm in a pnpm project? I have and often times, it fails to install the package because you are using npm in a pnpm project.

@antfu/ni lets you use the right package manager and detect is a function that gives the packageManager used in a given project based on cwd.

I cannot find anything mentioned about detect method in the @antfu/ni Github readme. How would you know such a method exists unless you read it in some open source codebase?

execa

Execa runs commands in your script, application or library. Unlike shells, it is optimized for programmatic usage. Built on top of the child_process core module. This is built by the legend, Sindre Sorhus

shadcn-ui/ui CLI uses execa to install the neccessary dependencies as part of npx shadcn-ui init command.

Conclusion

shadcn-ui CLI uses execa, built by the legend, Sindre Sorhu. Execa is used to install the necessary dependencies in a script file. We all are familiar with executing installation commands but if you want to install some packages in a script programatically, execa can be used.

shadcn-ui CLI detects the package manager used in your project using “detect” method from @antfu/ni.

This article marks my quest to study and learn what happens under the hood when you run npx shadcn-ui init command as completed.

I am moving on to study the add command.

Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: [email protected]

Build shadcn-ui/ui from scratch

References:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L382
2. https://www.npmjs.com/package/ora
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-package-manager.ts#L3
4. https://www.npmjs.com/package/@antfu/ni
5. https://github.com/antfu-collective/ni#readme
6. https://github.com/search?q=import { detect } from "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus