A modern, production-ready monorepo template featuring Turborepo, Next.js 15, shadcn/ui, and Tailwind CSS 4. Built with performance and developer experience in mind.

• Monorepo Architecture: Powered by Turborepo for efficient build caching and parallel task execution
• Next.js 15: Latest Next.js with Turbopack for lightning-fast development
• React 19: Built with the latest React features
• Tailwind CSS 4: Modern utility-first CSS framework
• shadcn/ui: High-quality, accessible UI components built with Radix UI
• TypeScript: Full type safety across the entire monorepo
• Biome: Fast linting and formatting with zero configuration
• pnpm: Efficient package management with workspace support
• Shared UI Package: Reusable component library across multiple apps

.
├── apps
│   └── web                    # Next.js application
│       ├── app                # App router pages
│       ├── components         # App-specific components
│       └── package.json
├── packages
│   ├── ui                     # Shared UI component library
│   │   ├── src
│   │   │   ├── components     # shadcn/ui components
│   │   │   ├── hooks          # Shared React hooks
│   │   │   ├── lib            # Utility functions
│   │   │   └── styles         # Global styles
│   │   └── package.json
│   └── typescript-config      # Shared TypeScript configurations
├── biome.json                 # Biome configuration
├── turbo.json                 # Turborepo configuration
└── package.json               # Root package.json

• Node.js >= 20
• pnpm >= 10.4.1

1. Clone the repository

git clone <your-repo-url>
cd turborepo-shadcn-tailwind-4

2. Install dependencies

pnpm install

3. Start development server

pnpm dev

The application will be available at http://localhost:3000

In the root directory, you can run:

• pnpm dev - Start development servers for all apps
• pnpm build - Build all apps and packages
• pnpm lint - Run linting across all workspaces
• pnpm format-and-lint - Check formatting and linting with Biome
• pnpm format-and-lint:fix - Fix formatting and linting issues automatically

To add new shadcn/ui components to your project:

pnpm dlx shadcn@latest add <component-name> -c apps/web

For example, to add a button component:

pnpm dlx shadcn@latest add button -c apps/web

This will automatically place the component in packages/ui/src/components where it can be shared across all apps in the monorepo.

Import components from the shared UI package in your app:

import { Button } from "@repo/ui/components/button"
import { Card } from "@repo/ui/components/card"

export default function Page() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  )
}

To add a new application to the monorepo:

1. Create a new directory in apps/
2. Add a package.json with the necessary dependencies
3. Include "@repo/ui": "workspace:*" to use the shared UI package
4. Update the app's Tailwind and PostCSS configs to reference the UI package

To add a new shared package:

1. Create a new directory in packages/
2. Add a package.json with appropriate exports
3. Reference it in apps using "@repo/<package-name>": "workspace:*"

• Turborepo - High-performance build system
• Next.js 15 - React framework with Turbopack
• React 19 - UI library
• TypeScript - Type safety

• Tailwind CSS 4 - Utility-first CSS framework
• shadcn/ui - Re-usable component collection
• Radix UI - Unstyled, accessible components
• Lucide React - Beautiful icon library

• Biome - Fast linter and formatter
• pnpm - Fast, disk space efficient package manager

Tailwind is configured in the UI package (packages/ui). The web app automatically inherits these styles by importing the global CSS file.

Shared TypeScript configurations are located in packages/typescript-config:

• base.json - Base configuration
• nextjs.json - Next.js specific configuration
• react-library.json - React library configuration

Linting and formatting rules are configured in biome.json at the root level and apply to all workspaces.

To create a production build:

pnpm build

To start the production server:

cd apps/web
pnpm start

This monorepo is optimized for deployment on Vercel, but can be deployed to any platform that supports Next.js.

1. Import your repository into Vercel
2. Set the root directory to apps/web
3. Vercel will automatically detect and configure the build settings

Contributions are welcome! Please feel free to submit a Pull Request.

MIT

• Turborepo Documentation
• Next.js Documentation
• shadcn/ui Documentation
• Tailwind CSS Documentation