Reputation: 11
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