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 command is registered. We will look at few more lines of code from packages/cli/src/commands/add.ts.
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.
Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch
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.
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.
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
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.
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.
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
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: ramu.narasinga@gmail.com
Build shadcn-ui/ui from scratch
References:
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L55
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L91
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L19C1-L27C2
