shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 1.1
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-25 20:45:51

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 1.1, we will look at a code snippet picked from [packages/cli/src/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts).

In part 1.0, I discussed the imports used and getPackageInfo utility function. Let’s continue where we left off in part 1.0 by picking a code snippet that is in continuation to part 1.0

The below code snippet is picked from [ui/packages/cli/src/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts)

```js
async function main() {
  const packageInfo = await getPackageInfo()

  const program = new Command()
    .name("shadcn-ui")
    .description("add components and dependencies to your project")
    .version(
      packageInfo.version || "1.0.0",
      "-v, --version",
      "display the version number"
    )

  program.addCommand(init).addCommand(add).addCommand(diff)

  program.parse()
}

main()
```

new Command()
-------------

[Commander package](https://www.npmjs.com/package/commander) is used and is configured with [name](https://www.npmjs.com/package/commander#name), [description](https://www.npmjs.com/package/commander#description-and-summary) and [version](https://www.npmjs.com/package/commander#version-option).

program.addCommand
------------------

After a new command is initialised, init, add and diff commands are added to the program variable using addCommand. You can specify (sub)commands using .command() or .addCommand(). There are two ways these can be implemented: using an action handler attached to the command, or as a stand-alone executable file.

program.parse
-------------

[Parse](https://www.npmjs.com/package/commander#parse-and-parseasync) function should be called with no parameters to parse process.argv via the CLI.

![](https://media.licdn.com/dms/image/D4E12AQHyIT8q9LEtVg/article-inline_image-shrink_1000_1488/0/1719348073451?e=1724889600&v=beta&t=GX3Mv9G9izLojVI1gwJig3PftSiEtBiffbnN1LkTpLY)

Conclusion:
-----------

In this article, I discussed a code snippet that deals with initialising command and adds custom commands such as init, add and diff that are used in shadcn-ui/ui CLI. I found out that program.parse() call with no arguments is important to parse the process.argv passed in via your CLI.

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://tthroo.com/)

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://www.npmjs.com/package/commander#parse-and-parseasync](https://www.npmjs.com/package/commander#parse-and-parseasync)
2.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts)