Hello guys! This guide will guide you as to how to integrate shadcn-ui to your turbo-repo.

You can find the prebuilt shadcn github below:

Github for the turbo-repo

Notes -

1. You have to export any new shadcn components in packages/shadcn/package.json before you start to use them.

2. This is built for web app only not for docs.

3. You need to run yarn dev to see changes(for both packages/shadcn and apps/web) or run it globally.

1. Get your turbo-repo with Tailwind

First step would be to get a turbo-repo with pre-build tailwind. This repo will have a package for tailwind-config, which may be used later as the base config and be extended on other packages.

a. Build it yourself

In this way you have to configure the tailwind config package by yourself.

b. Use turbo-repo example

This is the one we will follow as turbo-repo provides us a example repo with tailwind preconfigured.

To use the repo, do the following-

1. Get the example repo locally

   1.  npx create-turbo@latest -e with-tailwind
      

      In your terminal build the turbo-repo with the above command.

   2. Finish the setup by naming the turbo-repo and choosing your workspace. (Choose yarn to follow along)

   3. Wait for a few moments for the installation to complete and open the folder in your IDE.

2. Create your shadcn-ui package.

   1. Create a new package in the package directory and initialize the folder using-

       1.cd packages 
       2. mkdir shadcn
       3. cd shadcn
       4. yarn init -y
      

   2. Rename the package to "@repo/shadcn" to maintain same readability.

      

   3. Install tailwind in the current repository and add other configs in the package.json.

      

   4. Create your tsconfig.json

       {
           "extends": "@repo/typescript-config/react-library.json",
           "compilerOptions": {
               "baseUrl": ".",
               "paths": {
                   "@shadcn/*":["./*"],
               },
             "plugins": [{ "name": "next" }]
           },
           "include": ["**/*.ts", "**/*.tsx",],
           "exclude": ["node_modules"]
       }
      

   5. Initialize Shadcn-ui in this folder.

      

3. Create a dev and build script for tailwind.

   1. Final package.json

       {
         "name": "@repo/shadcn",
         "version": "1.0.0",
         "license": "MIT",
         "sideEffects": [
           "**/*.css"
         ],
         "exports": {
           "./styles.css": "./dist/index.css"
         },
         "scripts": {
           "build": "tailwindcss -i ./styles.css -o dist/index.css",
           "lint": "eslint src/",
           "dev": "tailwindcss -i ./styles.css -o ./dist/index.css --watch",
           "type-check": "tsc --noEmit"
         },
         "devDependencies": {
           "@repo/eslint-config": "*",
           "@repo/tailwind-config": "*",
           "@repo/typescript-config": "*",
           "autoprefixer": "^10.4.16",
           "postcss": "^8.4.33",
           "tailwindcss": "^3.4.0",
           "typescript": "^5.3.3"
         },
         "dependencies": {
           "@radix-ui/react-slot": "^1.0.2",
           "class-variance-authority": "^0.7.0",
           "clsx": "^2.1.0",
           "lucide-react": "^0.316.0",
           "tailwind-merge": "^2.2.1",
           "tailwindcss-animate": "^1.0.7"
         }
       }
      

4. Using shadcn components in other apps.

   1. Add a button for demo -

       npx shadcn-ui@latest add button
      

   2. Export this button in package.json.

      1. Update package.json (exports)

          "exports": {
              "./styles.css": "./dist/index.css",
              "./button":"./components/ui/button"
            },
         

   3. Add shadcn repo in dependency of web app. (in apps/web/package.json)

       "dependencies": {
           "next": "^14.0.4",
           "react": "^18.2.0",
           "react-dom": "^18.2.0",
           "@repo/ui": "*",
           "@repo/shadcn":"*"
         },
      

   4. Add path to avoid conflicts

      1. in apps/web/tsconfig.json

          {
            "extends": "@repo/typescript-config/nextjs.json",
            "compilerOptions": {
              "plugins": [{ "name": "next" }],
              "baseUrl": ".",
              "paths": {
                "@shadcn/*": ["../packages/shadcn/*"]
              }
            },
            "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
            "exclude": ["node_modules"]
          }
         

   5. Also add @repo/shadcn to transpiled packages in apps/web/next.config.js

5. Import styles from shadcn and use components.

   1. Import styles in global css file in apps/web

      1. In apps/web/src/app/globals.css add -

          @import '@repo/shadcn/styles.css'
         

   2. Import components in page.tsx for demo

6. Start scripts on both packages/shadcn and apps/web or run "yarn dev" globally on parent directory.

    yarn dev
   

   Check the results -