Monorepo architecture in shadcn-ui/ui.

In this article, you will learn the following concepts used to build Shadcn-ui/ui:

1. Tool used for monorepo architecture is Turbo.
2. What is Turbo?
3. Next.js + Turbo example.
4. Folder structure difference between Next.js + Turbo and the Shadcn-ui/ui.

Tool used for monorepo architecture is Turbo:

Pick any open source project, begin with reviewing the file structure to understand the project configuration. You will find all sorts of folders and files related to tooling. Shadcn-ui/ui uses Turbo for its monorepo architecture. It is evident from the existence of turbo.json file and the commands used in “scripts” in package.json.

What is Turbo?

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust from Vercel.

I recommend reading the turbo documentation for more information.

The following reasons are picked from turbo.build website as to why to choose Turbo.

1. Incremental by design
2. Ecosystem-friendly
3. Lightning fast HMR
4. React Server Components
5. Simultaneous Multiple Env Targets
6. Next.js support

Next.js + Turbo example:

Start from example section on the turbo.build provides one of the examples that involves Next.js usage. It is a Turborepo starter with Next.js

Folder structure difference between Next.js + Turbo and the Shadcn-ui/ui:

Folder structure of basic example provided by Turborepo with Next.js:

Folder structure of Shadcn-ui/ui

You do not strictly have to stick to the folders provided by the Turborepo starter pack, as you can see from the above screenshots, you are free to change the folder names inside apps/ and inside packages/ as you see fit for your applications.

Conclusion:

Pick any open source project, begin with reviewing the file structure to understand the project configuration. You will find all sorts of folders and files related to tooling. Shadcn-ui/ui uses Turbo for its monorepo architecture. It is evident from the existence of turbo.json file and the commands used in “scripts” in package.json.

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: [e-mail]

References:

1. https://github.com/shadcn-ui/ui/blob/main/turbo.json
2. https://github.com/shadcn-ui/ui/blob/main/package.json
3. https://turbo.build/
4. https://turbo.build/pack/docs
5. https://turbo.build/repo/docs/getting-started/from-example
6. https://github.com/vercel/turbo/tree/main/examples/basic

Comments

[Jerry Hargrive]

Can you explain more about the specific benefits you experienced by using Turbo in your projects? Great post, by the way!

[Ramu Narasinga]

Hey, thanks for your comment. You can define tasks in your turbo.json such as lint, dev, build that can trigger your workspace scripts in package.json. Turbo repo also caches your run results. Enables code sharing across packages to name a few benefits.