habib-N19
habib-N19

Reputation: 11

Where to put reusable components in nextjs monorepo scaffold with turboreepo and shadcn?

I followed how shadcn/ui is suggesting to configure a monorepo. But my main concern is reusable components build with shadcn/ui. Where to put it? For an example, in most of the apps in apps/** will be using similar landing with different bg, heading and such. So, I wanted to have a packages/shared/** to store them all. I was following v0 to do it. but I can't get to import that in the apps/** . can you help me decide what to do? do i have to copy paste these to each and every place or there's a better way of doing it?

I tried to get help from v0.dev, this package i tried to copy from shadcn/ui's monorepo's packages/ui and used it in packages/shared

    {
        "name": "@workspace/shared",
        "version": "0.0.1",
        "type": "module",
        "license": "MIT",
        "scripts": {
            "lint": "eslint ."
        },
        "dependencies": {
            "@workspace/ui": "workspace:*",
            "lucide-react": "0.456.0",
            "next-themes": "^0.4.3",
            "next": "^15.1.0",
            "react": "^19.0.0",
            "react-dom": "^19.0.0"
        },
        "devDependencies": {
            "@turbo/gen": "^2.2.3",
            "@types/node": "^22.9.0",
            "@types/react": "18.3.0",
            "@types/react-dom": "18.3.1",
            "@workspace/eslint-config": "workspace:*",
            "@workspace/typescript-config": "workspace:*",
            "@workspace/ui": "workspace:*",
            "react": "^18.3.1",
            "tailwindcss": "^3.4.14",
            "typescript": "^5.6.3"
        },
        "exports": {
            "./components/*": "./components/*.tsx"
        }
    }

root package.json->

{
  "name": "monorepo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "lint": "turbo lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "@workspace/eslint-config": "workspace:*",
    "@workspace/typescript-config": "workspace:*",
    "@workspace/shared": "workspace:*",
    "prettier": "^3.2.5",
    "turbo": "^2.3.0",
    "typescript": "5.5.4"
  },
  "packageManager": "[email protected]",
  "engines": {
    "node": ">=20"
  }
}

I am not entirely sure what I am doing wrong and how to work with this

Upvotes: 1

Views: 48

Answers (0)

Related Questions