Monorepo with Tanstack Router

This monorepo is a template for a monorepo with Tanstack Router.

Stack

• React 19
• React Compiler Beta
• Tanstack Router
• Tanstack Query
• React Hook Form
• TypeScript
• Tailwind CSS
• Shadcn UI
• Lucide Icons
• Zod
• pnpm
• ESLint

How to use

# Clone the repo
git clone https://github.com/toyamarodrigo/monorepo-tanstack-router-template

# or

gh repo clone toyamarodrigo/monorepo-tanstack-router-template

# Install dependencies
pnpm install

# Run the development server
pnpm dev

Structure

• apps/web: The main application
• packages/ui: The UI library
• packages/eslint-config: The ESLint configuration
• packages/typescript-config: The TypeScript configuration

repo/
├── apps/
│       ├── web/ # (main application)
│       │       ├── src/ # (components, styles, etc.)
│       │       ├── lib/ # (utils, hooks, etc.)
│       │       ├── routes/ # (Tanstack Router routes)
│       │       │       ├── __root.tsx
│       │       │       ├── about.tsx
│       │       │       ├── index.tsx
│       │       │       └── ...
│       │       ├── .gitignore
│       │       ├── components.json
│       │       ├── eslint.config.mjs
│       │       ├── index.html
│       │       ├── package.json
│       │       ├── postcss.config.js
│       │       ├── tailwind.config.js
│       │       ├── tsconfig.app.json
│       │       ├── tsconfig.json
│       │       ├── tsconfig.node.json
│       │       └── vite.config.js
│       └── many_apps/ # (other apps)
│               └── ...
│
├── packages/ # (shared libraries)
│       ├── ui/ # (shadcn/ui)
│       │       ├── src/ # (components, styles, etc.)
│       │       ├── components.json
│       │       ├── eslint.config.js
│       │       ├── package.json
│       │       ├── postcss.config.js
│       │       ├── tailwind.config.js
│       │       ├── tsconfig.json
│       │       └── tsconfig.lint.json
│       │
│       ├── eslint-config/ # (ESLint configuration)
│       │       ├── create-config.d.ts
│       │       ├── eslint.config.js
│       │       ├── package.json
│       │       └── tsconfig.json
│       │
│       ├── typescript-config/ # (TypeScript configuration)
│       │       ├── base.json
│       │       ├── package.json
│       │       └── react-library.json
│       │
│       └── many_packages/ # (other packages)
│               └── ...
├── .gitignore
├── eslint.config.mjs
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml # (pnpm workspace configuration)
├── README.md
└── tsconfig.json

Installing Shadcn UI Components

# Go to the packages/ui directory
cd packages/ui

# Install the component
pnpm dlx shadcn@canary add [COMPONENT]

# Example
pnpm dlx shadcn@canary add label

Note

• There is a bug in Shadcn CLI that imports the wrong path for the utils
• The correct path is @app/ui/lib/utils instead of @app/lib/utils which is the default path. For now you must manually change the path when adding a new component.

shadcn-ui/ui#6162

Use it in the web app

// apps/web...
import { Label } from "@app/ui/components/label";

function MyComponent() {
  return <Label>Hello World</Label>;
}