Shadcn/ui Project Structure
[Architecture: Shadcn/ui Project Structure] [L: Introduction]
Shadcn/ui provides beautifully designed accessible, customizable components that you can copy and paste into your apps.
Shadcn/ui codebase size is decent, not as large as the likes of Supabase, Cal.com, Lobechat. In this guide, you will learn the project structure used in Shadcn/ui.
Inspired by Bulletproof-react's Project Structure, We provide an overview of the project's folder structure.
Shadcn/ui is a monorepo and uses Turborepo build system
In this guide, we study the project structure in this order:
You will find additional tooling and configuration at the root level, these are analyzed and documented in Shadcn/ui tooling.
References:
- https://turbo.build/repo/docs
- https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md
- https://github.com/shadcn-ui/ui
[L: Root level structure] Let's look at an overview of the project structure of Supabase at root level.
apps # `apps` folder contains applications/systems. [Read more](link-to-guide)
|
docker # `docker` folder contains docker related code for self hosting purposes. [Read more](link-to-guide)
|
examples # `examples` folder contains Supabase usage examples. [Read more](link-to-guide)
|
i18n # `i18n` folder contains README.md in mutiple languages. [Read more](link-to-guide)
|
packages # `packages` folder contains shareable internal packages used across the monorepo. [Read more](link-to-guide)
|
playwright-tests # `playwright-tests` contains tests that test features commonly used in local studio [Read more](link-to-guide)
|
scripts # `scripts` is an internal-use only folder [Read more](link-to-guide)
|
supabase
|
tests
|
vale/styles
+-- app # application layer containing:
| | # this folder might differ based on the meta framework used
| +-- routes # application routes / can also be pages
| +-- app.tsx # main application component
| +-- provider.tsx # application provider that wraps the entire application with different global providers - this might also differ based on meta framework used
| +-- router.tsx # application router configuration
+-- assets # assets folder can contain all the static files such as images, fonts, etc.
|
+-- components # shared components used across the entire application