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.

Get free courses inspired by the best practices used in open source.

About me:

Website: https://ramunarasinga.com/

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

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

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

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