shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work?

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:

Ensure all resolved paths directories exist.
Write tailwind config.
Write css file.
Write cn file.
Install dependencies.

Let’s understand how shadcn-ui/ui CLI writes to tailwind config in runInit function.

Write tailwind config

After checking the directories exist, there are few more operations performed before writing tailwind config as shown in the below code.

This code is picked from cli/src/commands/init.ts.


const extension = config.tsx ? "ts" : "js"
 
const tailwindConfigExtension = path.extname(
  config.resolvedPaths.tailwindConfig
)
 
let tailwindConfigTemplate: string
if (tailwindConfigExtension === ".ts") {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES
    : templates.TAILWIND_CONFIG_TS
} else {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_WITH_VARIABLES
    : templates.TAILWIND_CONFIG
}
 
// Write tailwind config.
await fs.writeFile(
  config.resolvedPaths.tailwindConfig,
  template(tailwindConfigTemplate)({
    extension,
    prefix: config.tailwind.prefix,
  }),
  "utf8"
)

Let’s understand this code snippet

Extension


const extension = config.tsx ? "ts" : "js"

This extension is used in later parts of code that deal with writing cn file.

tailwindConfigExtension


const tailwindConfigExtension = path.extname(
  config.resolvedPaths.tailwindConfig
)

The path.extname() method returns the extension of the path, from the last occurrence of the . (period) character to end of string in the last portion of the path. If there is no . in the last portion of the path, or if there are no . characters other than the first character of the basename of path (see path.basename()) , an empty string is returned.


let tailwindConfigTemplate: string
if (tailwindConfigExtension === ".ts") {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES
    : templates.TAILWIND_CONFIG_TS
} else {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_WITH_VARIABLES
    : templates.TAILWIND_CONFIG
}

Depending on the tailwindConfigExtension and config.tailwind.cssVariables, tailwindConfigTemplate is set to a value using templates. Templates is imported from utils/templates and contains some variables initialised with values related to tailwind config

Write to tailwind config file


await fs.writeFile(
  config.resolvedPaths.tailwindConfig,
  template(tailwindConfigTemplate)({
    extension,
    prefix: config.tailwind.prefix,
  }),
  "utf8"
)

template used here in the above snippet is different from utils/templates. Different how? this template is imported from lodash.template

Conclusion:

After checking the directories exist (explained in the part 2.11), there are few more operations performed before writing tailwind config as shown in the below code.


const extension = config.tsx ? "ts" : "js"
 
const tailwindConfigExtension = path.extname(
  config.resolvedPaths.tailwindConfig
)
 
let tailwindConfigTemplate: string
if (tailwindConfigExtension === ".ts") {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES
    : templates.TAILWIND_CONFIG_TS
} else {
  tailwindConfigTemplate = config.tailwind.cssVariables
    ? templates.TAILWIND_CONFIG_WITH_VARIABLES
    : templates.TAILWIND_CONFIG
}
 
// Write tailwind config.
await fs.writeFile(
  config.resolvedPaths.tailwindConfig,
  template(tailwindConfigTemplate)({
    extension,
    prefix: config.tailwind.prefix,
  }),
  "utf8"
)

extension — This extension is used in later parts of code that deal with writing cn file.

tailwindConfigExtension — The path.extname() method returns the extension of the path, from the last occurrence of the . (period) character to end of string in the last portion of the path.

Write to tailwind config file — using fs.writeFile, tailwindConfig is updated but there is a catch. template from lodash.template is used to perform some replacements before writing to the file.

An example usage of lodash.template from the docs:


// Use the "interpolate" delimiter to create a compiled template.
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

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

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

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