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

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.8, we looked at function promptForMinimalConfig and its parameters and how the shadcn-ui CLI uses chalk to highlight text in the terminal.

This is a continuation to 2.8, we will look at below concepts in this article.

1. getRegistryStyles function

2. fetchRegistry function

3. stylesSchema

getRegistryStyles function:

getRegistryStyles is imported from utils/registry/index.tsx.

export async function getRegistryStyles() {
  try {
    const [result] = await fetchRegistry(["styles/index.json"])

    return stylesSchema.parse(result)
  } catch (error) {
    throw new Error(`Failed to fetch styles from registry.`)
  }
}

This function fetches the styles registry and parses the result using styles schema.

fetchRegistry function:

getRegistryStyles calls fetchRegistry function with a paramter [“styles/index.json”]. Why is the parameter being an array?

async function fetchRegistry(paths: string[]) {
  try {
    const results = await Promise.all(
      paths.map(async (path) => {
        const response = await fetch(`${baseUrl}/registry/${path}`, {
          agent,
        })
        return await response.json()
      })
    )

    return results
  } catch (error) {
    console.log(error)
    throw new Error(`Failed to fetch registry from ${baseUrl}.`)
  }
}

Notice how the parameter is an array of strings. Because fetchRegistry uses Promise.all and fetches based on path looping through the paths using map. Navigate to https://ui.shadcn.comstyles/index.json, you will find that the below json is fetched when the getRegistryStyles is called.

stylesSchema

stylesSchema is rather a simple schema with just name and label.

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)

Conclusion:

In this article, I discussed the following concepts:

1. getRegistryStyles function

getRegistryStyles is imported from utils/registry/index.tsx. This function fetches the styles registry and parses the result using styles schema.

2. fetchRegistry function

getRegistryStyles calls fetchRegistry function with a paramter [“styles/index.json”].

Why is the parameter being an array? Because fetchRegistry uses Promise.all and fetches based on path looping through the paths using map. Navigate to https://ui.shadcn.comstyles/index.json, you will find the styles related json that is fetched when the getRegistryStyles is called.

3. stylesSchema

stylesSchema is a rather simple schema with just name and label.

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)

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

References:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L29

2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L139

3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/schema.ts#L26