Tooling In Shadcn-ui/ui
[Architecture: Tooling In Shadcn-ui/ui] [C: Introduction]
In this guide, you will learn the tooling used in Shadcn-ui/ui repository.
What's Tooling?
You might be wondering what tooling means. If you check out Bulletproof React's Project Standards, it describes tools such as ESLint, Prettier, Husky etc.,
Similarly, in this guide, we provide an in-depth shadcn-ui/ui tooling analysis.
Shadcn-ui/ui Tooling
Shadcn-ui/ui is a monorepo, you will find more information about monorepo in Project Structure.
For us to study the tooling used in this monorepo, we would have to study the tooling used:
Tooling might vary based on an app or packages.
Concepts you will learn:
You will be learning the configuration used in this large monorepo. Read through this guide to understand how these tools work together.
Tools used at root level:
- .editorconfig
- .eslintrc.json
- .kodiak.toml
- .npmrc
- .nvmrc
- .prettierignore
- package.json
- pnpm-lock.yaml
- pnpm-workspace.yaml
- postcss.config.cjs
- prettier.config.cjs
- tailwind.config.cjs
- tsconfig.json
- turbo.json
- vitest.config.ts
Tools used in apps/www app:
- .prettierignore
- .prettierignore
- contentlayer.config.js
- next-env.d.ts
- next.config.mjs
- package.json
- postcss.config.cjs
- postcss.config.cjs
- tailwind.config.cjs
- tsconfig.json
- tsconfig.scripts.json
Tools used in packages/cli app:
Tools used in packages/shadcn app:
Conclusion:
In this guide, we introduced the tooling concepts you would learn. There will be additional resources provided pointing to source code, documentation and an in-depth analysis of configuration used across the shadcn-ui/ui monorepo.
References: