shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.9
Tags: javascript, nextjs, shadcnui, opensource
Published: 2024-07-09 20:48:40

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

![](https://media.licdn.com/dms/image/D4E12AQGAQ4nXA1GwCA/article-inline_image-shrink_1500_2232/0/1720557521712?e=1726099200&v=beta&t=SfbuoOIo_oV_C2e3z5t60wOFNjgw5Tuuv0rOLlRd2ho)

getRegistryStyles function:
---------------------------

getRegistryStyles is imported from [utils/registry/index.tsx](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L29).

```js
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?

```js
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](https://ui.shadcn.comstyles/index.json), you will find that the below json is fetched when the getRegistryStyles is called.

![](https://media.licdn.com/dms/image/D4E12AQEfHdtfdxbOUw/article-inline_image-shrink_1500_2232/0/1720557521406?e=1726099200&v=beta&t=k_9dQivflSBuqKvgfNNn-1j7kGKkrNO2rYb6I_H3KZM)

stylesSchema
------------

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

```js
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](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L29). 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](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.

```js
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_](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)

[Build shadcn-ui/ui from scratch](https://tthroo.com/)

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

1.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L29](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](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](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/schema.ts#L26)