getRegistryIndex() function in shadcn-ui/ui source code.
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-05-21 22:16:59

This article explains how getRegistryIndex() function in shadcn-ui/ui source code works. You will find this function in [shadcn-ui/ui source code](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L68) related to [CLI package](https://www.npmjs.com/package/shadcn-ui).

![](https://media.licdn.com/dms/image/D4E12AQGh7tU8kEzH8Q/article-inline_image-shrink_1500_2232/0/1716329198965?e=1721865600&v=beta&t=CueaOZEZflJPTsGh_WFL83h2SGisqB07R0WjfzuoY1A)

getRegistryIndex:
-----------------

getRegistryIndex function is called at Line number #68 in [add.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L68) and this is imported at the top of [add.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L68) from [registry/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L19)

![](https://media.licdn.com/dms/image/D4E12AQGl1_kcbVUzXA/article-inline_image-shrink_1500_2232/0/1716329198366?e=1721865600&v=beta&t=nadbw5yWvseiact-RNS7lKuLAjWOcorFbKHhxHxSh7M)

getRegistryIndex calls another function named fetchRegistry located in the same file [registry/index.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts)

[![](https://media.licdn.com/dms/image/D4E12AQE6MS5dDvRn3g/article-inline_image-shrink_1500_2232/0/1716329198540?e=1721865600&v=beta&t=1RzPbrow2FMtMPpkvdrKnWLPPYsACsB4_o2q82366DA)](https://tthroo.com)

fetchRegistry:
--------------
```
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}.\`)
  }
}
```

This function accepts a parameter named paths which is an array and wraps [paths.map](http://paths.map) in a Promise.all and makes a fetch call inside the map definition for each path.

You might be wondering what the baseUrl contains.

At the top of the file, you will find the below code snippet [at this line](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L14C1-L15C1)

const baseUrl = process.env.COMPONENTS\_REGISTRY\_URL ?? "https://ui.shadcn.com"

Since getRegistryIndex calls fetchRegistry with \[“index.json”\], the fetch is made to an endpoint that looks like https://ui.shadcn.com/registry/index.json

![](https://media.licdn.com/dms/image/D4E12AQHgLxt1lGc5NQ/article-inline_image-shrink_1000_1488/0/1716329198697?e=1721865600&v=beta&t=Tr7CSdsGLb50551uT1VKEwGaYK53GkiYbl4AjKj2Pok)

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

1.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L68](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L68)
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://ui.shadcn.com/registry/index.json](https://ui.shadcn.com/registry/index.json)