shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part 1
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-17 20:22:24

In this article, I discuss how [Blocks page](https://ui.shadcn.com/blocks) is built on [ui.shadcn.com](http://ui.shadcn.com). [Blocks page](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/blocks/page.tsx) has a lot of utilities used, hence I broke down this Blocks page analysis into 5 parts.

1.  shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part 1 
2.  shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part  2 (Coming soon)
3.  shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part  3 (Coming soon)
4.  shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part  4 (Coming soon)
5.  shadcn-ui/ui codebase analysis: How is “Blocks” page built — Part  5 (Coming soon)

In part 1, we will look at the following:

1.  Where to find blocks page code in the shadcn-ui/ui repository?
2.  getAllBlockIds function
3.  \_getAllBlocks function

These function further call other utility functions that will be explained in the other parts.

Where to find blocks page code in the shadcn-ui/ui repository?
--------------------------------------------------------------

[blocks/page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/blocks/page.tsx) is where you will find Blocks page related code in the [shadcn-ui/ui](https://github.com/shadcn-ui/ui/tree/main) repository

![](https://media.licdn.com/dms/image/D4E12AQGtURsQ-dgNeg/article-inline_image-shrink_1500_2232/0/1718654911835?e=1724284800&v=beta&t=PGoUPbRno7TF7ZPMNNvquXUE6f73uUmfykL2ed-0QOw)

Just because it has only 10 lines of code does not mean it is a simple page, there is a lot going on behind these lines, especially in the [lib/blocks.ts](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75), but don’t worry, we will understand the utility functions used in depth later in this article and other parts as well.

BlocksPage gets the blocks from a function named [getAllBlockIds()](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20) which is imported from [lib/blocks](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75) and these blocks are mapped with a BlockDisplay component that shows blocks on the Blocks page. Let’s find out what is in getAllBlockIds()

![](https://media.licdn.com/dms/image/D4E12AQEdyKdc4S4WAw/article-inline_image-shrink_1500_2232/0/1718654912544?e=1724284800&v=beta&t=jFtvj-6buDjyHvdirBgML2F0dhPBOldJqmmROkYbmcU)

getAllBlockIds function
-----------------------

The below code snippet is picked from [lib/blocks.ts](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20)

```js
export async function getAllBlockIds(
  style: Style\["name"\] = DEFAULT\_BLOCKS\_STYLE
) {
  const blocks = await \_getAllBlocks(style)
  return blocks.map((block) => block.name)
}
```

This code snippet is self explanatory, style parameter gets a default value DEFAULT\_BLOCKS\_STYLE because in the Blocks page, we call getAllBlockIds without any params as shown below:

```js
const blocks = await getAllBlockIds()
```

But wait, what is the value in `DEFAULT\_BLOCKS\_STYLE`?

At [line 14 in lib/blocks](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L14), you will find this below code:

```
const DEFAULT\_BLOCKS\_STYLE = "default" satisfies Style\["name"\]
```

“default” satisfies Style\[“name”\], Style is from [register/styles](https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/styles.ts#L12). I just admire the quality of Typescript written in this shadcn-ui/ui. So, \_getAllBlocks gets called with a param named style that is initiated to “default”. So far, the code is straight forward. Let’s now understand what is in [\_getAllBlocks](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75)

\_getAllBlocks function
-----------------------

The below code snippet is picked from [lib/blocks.ts](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20)

```js
async function \_getAllBlocks(style: Style\["name"\] = DEFAULT\_BLOCKS\_STYLE) {
  const index = z.record(registryEntrySchema).parse(Index\[style\])

  return Object.values(index).filter(
    (block) => block.type === "components:block"
  )
}
```

Even though, getAllBlockIds from above calls this function with a parameter, this function still has a default value set to the style parameter.

```js
const index = z.record(registryEntrySchema).parse(Index\[style\])
```

Code above has the following:

### z.record

[Record schema in Zod](https://zod.dev/?id=records) are used to validate types such as Record<string, number>. This is particularly useful for storing or caching items by ID.

### registryEntrySchema

[registryEntrySchema](https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/schema.ts#L16) defines a schema for the blocks

```js
export const registryEntrySchema = z.object({
  name: z.string(),
  description: z.string().optional(),
  dependencies: z.array(z.string()).optional(),
  devDependencies: z.array(z.string()).optional(),
  registryDependencies: z.array(z.string()).optional(),
  files: z.array(z.string()),
  source: z.string().optional(),
  type: z.enum(\[
    "components:ui",
    "components:component",
    "components:example",
    "components:block",
  \]),
  category: z.string().optional(),
  subcategory: z.string().optional(),
  chunks: z.array(blockChunkSchema).optional(),
})
```

### parse(Index\[style\])

[parse](https://zod.dev/?id=parse) is a schema method to check data is valid. If it is, a value is returned with full type information! Otherwise, an error is thrown.

Example:

```js
const stringSchema = z.string();

stringSchema.parse("fish"); // => returns "fish"
stringSchema.parse(12); // throws error
```

[Index](https://github.com/shadcn-ui/ui/blob/06cc0cdf3d080555d26abbe6639f2d7f6341ec73/apps/www/__registry__/index.tsx#L6) is imported from \_registry\_folder and contains all the components used in shadcn-ui/ui.

![](https://media.licdn.com/dms/image/D4E12AQGt9pk2Rk8QgQ/article-inline_image-shrink_1000_1488/0/1718654912965?e=1724284800&v=beta&t=9v-PvJOlqLqvuPBMCS5bMObX-8AYOHJfX0wjIUF6-fI)

Looks like this file gets auto generated by [scripts/build-registry.ts](https://github.com/shadcn-ui/ui/blob/main/apps/www/scripts/build-registry.mts) and this is also used in CLI package to add shadcn components into your project, more on this in the upcominhg articles.

Basically, we validate Index\[“default”\] against the registry schema to ensure the auto generated code is valid and is ready for further processing such as showing in blocks page.

\_getAllBlocks filters the blocks based on the block type as shown below:

```js
return Object.values(index).filter(
    (block) => block.type === "components:block"
  )
```

This is how you are able to see components that are specific to Blocks page.

Conclusion:
-----------

We looked at two important module functions named getAllBlockIds and \_getAllBlocks. I find this code to be pretty self explanatory, I do admire the way zod’s Record schema validations are used on the auto generated registry index json.

> _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)

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

1.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/blocks/page.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/blocks/page.tsx)
2.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20)
3.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75](https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75)
4.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/schema.ts#L16](https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/schema.ts#L16)