Turborepo Template

Explore featured packages built with this template.

Exciting news! We've launched a new course to help you master this template: Craft Next Gen UI Libraries for React 18 and Next.js 14

Features

This template offers the following pre-configured features. Additionally, your repository will automatically be rebranded with the help of workflows and post-install scripts.

✅ Monorepo powered by Turborepo and GitHub actions for automating building, testing, and deploying your library

✅ Examples with Next.js, and Vite to showcase how your library can be utilized

✅ Examples pre-configured for Light/Dark theme based on user preference

✅ Examples ready to be deployed to Vercel

✅ Typedoc setup for automatic documentation generation based on tsdoc comments

✅ Code of Conduct and contributing files, ready for customization

✅ Prettier and linter configured according to modern best practices (Feel free to add your flavor)

✅ Recommended VSCode extensions - Prettier and Kanban board for code formatting and project management directly within your IDE

✅ Powerful code generators - try yarn plop

✅ Test setup with Vitest - A modern and fast testing framework supporting Jest-like APIs

✅ Workflows to automate testing on every pull-request or code push event

✅ Workflow to automatically publish and create GitHub releases when you update your library's package.json file.

✅ Workflow to automatically rebrand the entire template based on your repository name. (Refer TODO.md)

✅ Plus, this readme file includes a quick checklist for configuring Codecov and other badges, setting up your docs website on GitHub pages, and more. See Checklist.

Creates a library that is

✅ Fully Treeshakable (e.g., import {Bars1, Bars2} from react18-loaders/dist/server/bars)

✅ Fully TypeScript Supported

✅ Leverages the power of React 18 Server components

✅ Compatible with all React 18 build systems/tools/frameworks

✅ Documented with Typedoc (Docs)

Getting Started:

This template is based on one of the official Turbo Repo starters but comes with a plethora of additional features specifically designed for developing and publishing JavaScript/TypeScript libraries, especially for React 18.

To get started, simply click on the "Use this template" button to create a new repository based on this template, **update sripts/rebrand.config.json if required, and install dependencies(Will automatically trigger rebrand.js). Customize it according to your requirements for your next JavaScript/TypeScript/React/Next.js library or project.

For detailed instructions and a checklist, please refer to TODO.md.

You can also start by running pnpm dlx create-turbo@latest --example https://github.com/react18-tools/turborepo-template/ in command line interface.

What's Different from Turborepo official templates?

Compared to the default scaffold from create-turbo, this template offers:

• Unit tests with vitest
• Build setup with tsup and esbuild-plugin-react18 that supports React Server components out of the box
• Automatic file generation
  • Simply run yarn plop and follow the prompts to auto-generate your new component with test files and dependency linking, adhering to best practices automatically
• GitHub actions/workflows to auto-publish your package when the version changes
• GitHub action/workflow + pre-install scripts to automatically rebrand your repo on creation

🧱 Generate New Components

This project uses plop to scaffold reusable React components under the lib or packages/shared directory.

To generate a new component, run:

pnpm plop

You’ll be prompted to choose:

• The target package (lib or packages/shared)
• The component name (e.g., Card, or nested like forms/Input)
• Whether it’s a client component (adds "use client" directive)
• Whether to include a .module.scss file
• Whether to generate a test stub
• An optional description (used as JSDoc)

🧠 The generator:

• Creates a folder with .tsx, optional .module.scss, and .test.tsx
• Updates index.ts files recursively
• Adds exports to package.json automatically

🤩 Don't forget to star this repository!

Looking for a hands-on course to get started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React, and TypeScript

License

Licensed under the MPL-2.0 open-source license.

Enrolling in our courses or sponsor our work.

---

with 💖 by Mayank Kumar Chaudhari