DEV Community

Cover image for shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.14
Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

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

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 from the above are covered in part 2.12 and 2.13, let’s find out how “Write cn file” operation is done.

Write cn file

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

// Write cn file.
  await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )
Enter fullscreen mode Exit fullscreen mode

templates.UTILS contains the below code

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`

export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`
Enter fullscreen mode Exit fullscreen mode

cn utility is literally code returned as a string and written to lib/utils when you run shadcn init.

Conclusion:

templates.UTILS variable in packages/cli/src/commands/init.ts contains the cn utility function related code.

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`


export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`
Enter fullscreen mode Exit fullscreen mode

Catch here is, this code is presented as a string into fs.writeFile that writes to a provided path as shown below

await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )
Enter fullscreen mode Exit fullscreen mode

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

About me:

Website: https://ramunarasinga.com/

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

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

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

References:

  1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L331C3-L356C4
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/templates.ts#L1

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more