Skip to content

Instantly share code, notes, and snippets.

@hungtienvu
Last active March 31, 2024 14:31
Show Gist options
  • Save hungtienvu/b988c3a1a2943ec0abe457572418dc0e to your computer and use it in GitHub Desktop.
Save hungtienvu/b988c3a1a2943ec0abe457572418dc0e to your computer and use it in GitHub Desktop.
Install Turbo Monorepo and shadcn

Here are the steps.

Please feel free to suggest for updates!

  1. Create a new mono repo project npx create-turbo@latest

  2. Update typescript-config/nextjs.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "extends": "./base.json",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "jsx": "preserve",
    "noEmit": true,
    "paths": {
      "@ui/*": ["../../packages/ui/src/*"] <--add this line
    }
  }
}


  1. under packages/ui

update package.json scripts

  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "generate:component": "turbo gen react-component",
    "ui:add": "pnpm dlx shadcn-ui@latest add" <-- add this
  },

add components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "./tailwind.config.ts",
    "css": "./src/global.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@ui/components",
    "utils": "@ui/lib/utils"
  }
}

tsconfig.json

{
  "extends": "@repo/typescript-config/react-library.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "paths": {
      "@ui/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
  1. Root package.json
{
  "name": "shopday-webs",
  "private": true,
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "lint": "turbo lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "ui:add": "pnpm --filter @repo/ui ui:add"
  },
  "devDependencies": {
    "@repo/eslint-config": "*",
    "@repo/typescript-config": "*",
    "prettier": "^3.2.5",
    "turbo": "latest"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "[email protected]",
  "workspaces": ["apps/*", "packages/*"]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment