Turborepo Boilerplate is a monorepo starter template powered by Turborepo that scaffolds a Next.js web application, a shared React component library, and centralized ESLint and TypeScript configurations. This boilerplate gives you a working multi-package repository structure out of the box so you can focus on writing application and library code instead of wiring up build tooling.
What is Turborepo Boilerplate?
Turborepo Boilerplate is a GitHub-hosted monorepo template created by developer MahdiTa97 that uses Turborepo to manage two apps and packages under a single repository. As input, you clone the repository or run a create-turbo command; the output is a repository containing a Next.js app called web, a React component library called ui, shared @repo/eslint-config, shared @repo/typescript-config, and a Tailwind CSS setup that both apps and packages can use. The entire repository is written in 100% TypeScript, and it runs on any environment that supports Node.js and package managers like yarn or npm.
Key Features
- Turborepo monorepo structure — Uses Turborepo's build system to orchestrate tasks across the
webapp,uipackage, and shared configuration packages, with the standardappsandpackagesdirectory layout. - Next.js web app — The
webapp is a Next.js application styled with Tailwind CSS, ready for you to extend into a product, marketing site, or dashboard. - Shared React UI library — The
uipackage is a React component library built with Tailwind CSS, daisyui, and react-daisyui, shared by the Next.js apps in the monorepo. - Tailwind class prefixing — The UI package uses a
ui-prefix on its Tailwind classes so utility classes from the shared design system do not overwrite or conflict with application-level Tailwind styles. - transpilePackages integration — The Next.js configuration uses
transpilePackagesto consume the.tsxcomponent files from theuipackage directly, without requiring a separate build step for the library during development. - Shared ESLint and TypeScript configs — Centralized
@repo/eslint-config(including eslint-config-next and eslint-config-prettier) and@repo/typescript-configlet you manage linting rules and TypeScript compiler options in one place. - Tooling preinstalled — The repo comes with ESLint, Prettier, and TypeScript already configured, and lists Tailwind CSS, daisyui, and react-daisyui as styling utilities.
Who is it for?
Turborepo Boilerplate is aimed at developers and teams who want to start a multi-package JavaScript or TypeScript project without manually assembling the Turborepo, Next.js, and Tailwind CSS configuration. It suits developers who are evaluating Turborepo as a monorepo tool, frontend teams who need a shared component library across multiple Next.js apps, and anyone who prefers a pre-configured Tailwind design system using daisyui components. The template is also useful for developers who want a reference implementation of the transpilePackages pattern for consuming internal packages directly from source.
Use cases
- Frontend teams: Scaffold a monorepo with a Next.js web app and a shared React UI package, then start building features without configuring Turborepo, ESLint, or Tailwind from scratch.
- UI library maintainers: Use the
uipackage as a starting point for a component library that gets distributed with Tailwind styling and daisyui-based components. - Monorepo evaluators: Compare Turborepo with NX by cloning this boilerplate and the linked NX-based Next.js boilerplate from the same author.
- Next.js developers: Quickly spin up a Next.js application with Tailwind CSS, while keeping shared utilities and UI components in separate packages within the same repository.
How does the template work?
You can get started two ways: run npx create-turbo@latest -e with-tailwind to generate a new project from this example, or git clone https://github.com/MahdiTa97/turborepo-boilerplate followed by yarn install to use it directly. After cloning, you can rename the NPM organization scope @repo to your own scope by renaming folders in packages/*, searching and replacing repo with your chosen name, and re-running yarn install.
Pros and cons
- Pro: All packages and apps are 100% TypeScript, giving you static type checks across the entire monorepo.
- Pro: The
uipackage uses aui-prefix to avoid Tailwind class collisions between the component library and the consuming apps. - Pro: The template includes a full set of developer tools: ESLint, Prettier, and shared TypeScript configs are already wired up.
- Con: Changing the NPM organization scope from
@repoto your own name is a manual process, as the README notes: you must rename folders, search and replace the scope, and re-install dependencies.
Alternatives
- NX — another popular monorepo tool; the README links to a separate NX-based Next.js React boilerplate by the same author for comparison.
FAQ
How do I create a new project from this boilerplate?
Run npx create-turbo@latest -e with-tailwind to generate a fresh project based on this example, or clone the repository directly with git clone https://github.com/MahdiTa97/turborepo-boilerplate and then run yarn install to set up dependencies.
What does the ui- prefix do in the UI package?
The ui package uses a ui- prefix on its Tailwind classes to ensure that Tailwind utility classes from the shared component library do not overwrite or clash with those used in the Next.js apps. This keeps the design system isolated while still letting both sides share the same Tailwind configuration.
Can I change the NPM organization scope?
Yes, but the process is manual. You need to rename the folders inside packages/* to replace repo with your desired scope, then search and replace repo throughout the codebase with the new scope, and finally re-run yarn install.
What packages and apps are included?
The repository includes a web Next.js app with Tailwind CSS, a ui React component library using Tailwind CSS, daisyui, and react-daisyui, plus @repo/eslint-config and @repo/typescript-config for shared linting and TypeScript settings.
Is everything written in TypeScript?
Yes, each package and app is 100% TypeScript. TypeScript is used for static type checking, and shared TypeScript compiler options are defined in the @repo/typescript-config package.
