dan5py/turborepo-shadcn-ui

Turborepo starter with shadcn/ui pre-configured.

Turborepo starter with shadcn/ui

This is Turborepo starter with shadcn/ui pre-configured.

Note

This example uses pnpm as package manager.

npm version

Using this example

Clone the repository:

git clone https://github.com/dan5py/turborepo-shadcn-ui.git

Install dependencies:

cd turborepo-shadcn-ui
pnpm install

Add ui components

Use the pre-made script:

pnpm ui:add <component-name>

This works just like the add command in the shadcn/ui CLI.

Add a new app

Turborepo offer a simple command to add a new app:

pnpm turbo gen workspace --name <app-name>

This will create a new empty app in the apps directory.

If you want, you can copy an existing app with:

pnpm turbo gen workspace --name <app-name> --copy

Note

Remember to run pnpm install after copying an app.

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• docs: a Next.js app
• web: another Next.js app
• @repo/ui: a stub React component library shared by both web and docs applications (🚀 powered by shadcn/ui)
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Build

To build all apps and packages, run the following command:

cd turborepo-shadcn-ui
pnpm build

Develop

To develop all apps and packages, run the following command:

cd turborepo-shadcn-ui
pnpm dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd turborepo-shadcn-ui
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Useful Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

Learn more about shadcn/ui:

• Documentation

turborepo-shadcn-ui's Issues

How to implement Dark mode?

Thanks for this template!

Shadcn's dark mode works well inside apps/ workspace.
But how can we add dark mode inside the packages/ui?

Doc says to wrap ThemeProvider in layout.

Options on import shortcuts?

First of all, great repo!

I have used your monorepo setup from quite a long time ago and I loved how you use a script to generate index.ts on the root of the ui component folder. For me, it makes every easier and made the code imports cleaner, which I can do something like this:

import {
  Button,
  ScrollArea,
  Separator,
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
// or any other shadcn components
} from '@ui/index'

Recently I'm stared creating a new monorepo and I saw things have changed a bit. (And I loved the improvements ✨)

However, I missed having the index.ts for all component import shortcut. I'm not sure if it is because the old scripts were having confilcts with the use-toast.ts and now the sonnar.tsx component, so I've modified the generateIndex.mts like so which solves issues mentioned above.

//generateIndex.mts
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";

// Get the current file's directory path
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const componentsPath = path.join(__dirname, "../components/ui");
const indexFilePath = path.join(componentsPath, "../../index.ts");

// Generate the index.tsx file by looping through all the files in the components folder
const componentFiles = fs.readdirSync(componentsPath);
const exportStatements = componentFiles.map((file) => {
  // ignore use-toast.tsx
  if (file === "use-toast.ts") return "";
  if (file === "sonner.tsx")
    return "export { Toaster as Sonner } from './components/ui/sonner';";
  const componentName = path.basename(file, ".tsx");
  return `export * from './components/ui/${componentName}';`;
});
const banner = `//! This file is auto-generated by the generateIndex.mts script. Do not edit this file directly.\n\n`;
const indexFileContent = banner + exportStatements.join("\n") + "\n";

fs.writeFileSync(indexFilePath, indexFileContent, "utf8");

console.log("\x1b[32m%s\x1b[0m", "index.tsx file generated successfully.");

The only thing that will be different for the import paths from shadcn doc is the Sonner component, which now becomes:

import { Sonner } from '@ui/index'

It's isn't an issue really, just wanted to share this in case anyone needs it!

Multiple star export conflict

Hey there,

Exporting multiple ui components causes webpack to complain about name conflicts:

Example console output?

The requested module './components/ui/alert-dialog' contains conflicting star exports for the names '$$typeof', '__esModule' with the previous requested module './components/ui/accordion'

Import trace for requested module:
../../packages/ui/index.tsx
./app/page.tsx

../../packages/ui/index.tsx
The requested module './components/ui/aspect-ratio' contains conflicting star exports for the names '$$typeof', '__esModule' with the previous requested module './components/ui/accordion'

Import trace for requested module:
../../packages/ui/index.tsx
./app/page.tsx

../../packages/ui/index.tsx
The requested module './components/ui/avatar' contains conflicting star exports for the names '$$typeof', '__esModule' with the previous requested module './components/ui/accordion'

Import trace for requested module:
../../packages/ui/index.tsx
./app/page.tsx


etc...

You can replicate this by installing every single component and then importing any of them inside of next.

Versions:

next:13.4.13
template git commit hash: b55c47ca7472d0a0a5a3b12bee95c31567eac2b2

Use with Expo?

Hi there!

Great work on the template, I'm following it to lay on top of T3.

Any idea if it works with expo?

Pretty new to this so looking out for any blockers that may arise during this migration.

ui

how generate ui dist, plese help me

pnpm lint command error

Hi @dan5py good repo and it's on its way to being a great starting point for projects!

A couple things of note.

When running pnpm lint I see it throws an error:

> [email protected] lint /Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui
> turbo lint

• Packages in scope: @repo/eslint-config, @repo/typescript-config, @repo/ui, docs
• Running lint in 4 packages
• Remote caching disabled
@repo/ui:lint: cache hit, replaying logs 589e04928081172e
@repo/ui:lint: 
@repo/ui:lint: > @repo/[email protected] lint /Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/packages/ui
@repo/ui:lint: > eslint .
@repo/ui:lint: 
docs:lint: cache miss, executing 002ae449ef3d2771
docs:lint: 
docs:lint: > [email protected] lint /Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/apps/docs
docs:lint: > eslint . --max-warnings 0
docs:lint: 
docs:lint: 
docs:lint: /Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/apps/docs/next.config.mjs
docs:lint:   0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/next.config.mjs` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
docs:lint: However, that TSConfig does not include this file. Either:
docs:lint: - Change ESLint's list of included files to not include this file
docs:lint: - Change that TSConfig to include this file
docs:lint: - Create a new TSConfig that includes this file and include it in your parserOptions.project
docs:lint: See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
docs:lint: 
docs:lint: /Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/apps/docs/postcss.config.mjs
docs:lint:   0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/postcss.config.mjs` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
docs:lint: However, that TSConfig does not include this file. Either:
docs:lint: - Change ESLint's list of included files to not include this file
docs:lint: - Change that TSConfig to include this file
docs:lint: - Create a new TSConfig that includes this file and include it in your parserOptions.project
docs:lint: See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
docs:lint: 
docs:lint: ✖ 2 problems (2 errors, 0 warnings)
docs:lint: 
docs:lint:  ELIFECYCLE  Command failed with exit code 1.
docs:lint: ERROR: command finished with error: command (/Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/apps/docs) /opt/homebrew/bin/pnpm run lint exited (1)
docs#lint: command (/Users/michaelzavattaro/Developer/test-turbo/turborepo-shadcn-ui/apps/docs) /opt/homebrew/bin/pnpm run lint exited (1)

 Tasks:    1 successful, 2 total
Cached:    1 cached, 2 total
  Time:    1.715s 
Failed:    docs#lint

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.

I was able to fix this by adding "**/*.mjs", to apps/docs/tsconfig.json.

Another thing I noticed is that the linting doesn't work at all out of the box. Not sure how to fix this, if there's specific VSCode settings to support this setup?

Thanks!

DropdownMenu component doesn't work

The DropdownMenu component doesn't show the list of the DropdownMenuItems when clicked. The component is located in packages/ui/src/components/ui

And I'm using the component in apps/my_app/app/page.tsx

"use client"
import { Button } from "@repo/ui/components/ui/button"
import { Badge } from "@ui/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "@ui/components/ui/dropdown-menu"
import { Moon, Sun } from "lucide-react"
import * as React from "react"
import { useTheme } from "next-themes"

export default function Page() {
  const { setTheme } = useTheme()

  return (
    <main>
      <Button
        onClick={() => {
          console.log("Setting theme to light")
        }}
      >
        Click me
      </Button>
      <Badge variant="destructive">hello</Badge>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="icon">
            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">Toggle theme</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={() => setTheme("light")}>
            Light
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setTheme("dark")}>
            Dark
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setTheme("system")}>
            System
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </main>
  )
}

I'm I missing something here?

Turborepo using npm

I'm following your monorepo template for using shadcn-ui but using npm (workspaces). However, the application has continuous import errors, in specific for the component, as well as not responding the default shadcn styling after export. It is possible to provide a template for such a package manager or other alternative?

Ps. I wanted to use npm because my team uses such a manager and it would be easier to standardize the resources.

Vite support

Hi, I'd like to add vite. But I am stuck with some setup issues.

1. cd apps && npx create-vite vite --template react-ts
2. git add . && git commit -m "Add vite"
3. Add dependency to @repo/ui and tailwind in vite/package.json and do pnpm install
   "dependencies": { "@repo/ui": "workspace:*",
4. Change button in App.tsx to shadcn/ui button.
   <Button onClick={() => setCount((count) => count + 1)}> count is {count} </Button>

pnpm dev leads to this error

Error: The following dependencies are imported but could not be resolved:
@ui/lib/utils (imported by /Users/evgenius1424/fleet/turborepo-shadcn-ui/packages/ui/src/components/ui/button.tsx)

I am pretty sure that we need to add the same logic that we have in next.js.

I see files like postcss.config.js, next.config.js and tailwind.config.ts but no direct path to the vite config configuration.

I've raised a PR, so if you have any ideas just let me know.
#19

Alternative for turborepo using nx

Hi @dan5py, I was working on an alternative to turborepo,I'm using nx to create the monorepo along with shadcn-ui and tailwindcss integration. It would be a pleasure to have your collaboration (there are some things that are open like css alias and etc). I would be very grateful and it was you who inspired me to create such an alternative.

The application is found here.

Thank you very much and have a great week.

Module not found: Can't resolve '@ui/lib/utils'

│   ▲ Next.js 15.0.0-canary.32
│   - Environments: .env.local
│   - Experiments (use with caution):
│     · ppr
│
│    Creating an optimized production build ...
│ Failed to compile.
│
│ ../../packages/ui/src/components/ui/accordion.tsx
│ Module not found: Can't resolve '@ui/lib/utils'
│
│ https://nextjs.org/docs/messages/module-not-found
│
│ Import trace for requested module:
│ ../../packages/ui/src/components/ui/alert-dialog.tsxngs)/activities/log-list.tsx
│ Module not found: Can't resolve '@ui/lib/utils'
│
│ https://nextjs.org/docs/messages/module-not-found
│
│ Import trace for requested module:
│ ./src/app/[lang]/(dashboard)/calendar/meet-together/plans/[planId]/edit-plan-dialog.tsx
│
│ ../../packages/ui/src/components/ui/avatar.tsx
│ Module not found: Can't resolve '@ui/lib/utils'
│
│ https://nextjs.org/docs/messages/module-not-found
│
│ ../../packages/ui/src/components/ui/badge.tsx
│ Module not found: Can't resolve '@ui/lib/utils'
│
│ https://nextjs.org/docs/messages/module-not-found
│
│ Import trace for requested module:
│ ./src/app/[lang]/(dashboard)/[wsId]/users/filters.tsx
│
│ ../../packages/ui/src/components/ui/button.tsx
│ Module not found: Can't resolve '@ui/lib/utils'
│
│ https://nextjs.org/docs/messages/module-not-found
│
│ Import trace for requested module:
│ ./src/app/[lang]/error.tsx
│
│
│ > Build failed because of webpack errors
│  ELIFECYCLE  Command failed with exit code 1.

There's this weird error that just doesn't find import { cn } from '@ui/lib/utils'; as a valid import at build time and prevented the build from progressing. Most default configurations from turborepo-shadcn-ui are kept as-is. I'd be really appreciated if anyone can help out with this problem, please check out https://github.com/tutur3u/tutur3u/tree/refactor/move-ui-into-separate-package for a reproduction.

npm ui:add <component> -- command runs into error. Issue with generateIndex.mts script

I tried adding another component, the component was added successfully, but then it ran into error while running this script.
Event though the new alert component is added, when using it in the app, i cannot see the component

VSCode: auto import not working

Hi - I was looking for way to easily integrate shdcn with turbo and ran by your repo.

Looks like auto import from vscode isn't working to reference the @ui.

Also how would I import my own components under components/?

eg:

apps/
packages/
  ui/
    components
      /ui
        Button.tsx
      MyComp1.tsx
  MyComp2.tsx

How could I import MyComp1.tsx or MyComp2.tsx? Looks like nextjs.json for tsconfig is set to alias ../../packages/ui/components/ui/*

Hello sir, i got an issue just like in the picture below, may i ask you why? Thanksss

Can I use regular tailwind styles?

I have some code that looks like this, but it renders like this, aka it doesn't render any of my normal tailwind classes. Is this to be expected or do I have something misconfigured?

(globals.css is being imported into layout.js) (thanks for your work)

Can You add a vite app

I really appretiate your works. But i am a beginer. can you add a vite app with correct information. it would complete this project.

Hello sir, i got a bug just like in the picture below, may i ask you why? Thank you so much

The error said
error ../../packages/ui/src/components/ui/accordion.tsx:7:0
shell:dev: Module not found: Can't resolve '@ui/lib/utils'
shell:dev: 5 | import { ChevronDown } from 'lucide-react'
shell:dev: 6 |
shell:dev: > 7 | import { cn } from '@ui/lib/utils'
shell:dev: 8 |
shell:dev: 9 | const Accordion = AccordionPrimitive.Root
shell:dev: 10 |
shell:dev:
shell:dev: https://nextjs.org/docs/messages/module-not-found

question: path alias in both tsconfig?

I hit an issue where i get runtime errors without this path alias https://github.com/dan5py/turborepo-shadcn-ui/blob/main/packages/typescript-config/nextjs.json#L13 like

web:dev:  ⨯ ../../packages/ui/src/components/ui/button.tsx:4:0
web:dev: Module not found: Can't resolve '@/utils/cn'.

could you please elaborate why having only this one is not enough https://github.com/dan5py/turborepo-shadcn-ui/blob/main/packages/ui/tsconfig.json#L6 . does it mean if i want to use alias like @/* in both package/ui and apps/docs they will be conflicting and I need separate alias for ui package?
am I better just go without aliases?

UI that imports other UI in package causes causes error I found a solution

so if you use a component like toast or form that imports another ui element it cant find it when building change the @ui/: [./src/] to @repo/ui/: [./src/]

What are the steps to add a new app to use the ui package?

For example a vite with react app.

which config should I do to make this new project us the ui package?

Thanks

import issue

I am trying to import using "@ui/lib/utils" but instead its making me import using this, both the tsconfig and components files are the same as the original project

Client components need to be imported from folder instead of "ui"

when trying to use the toaster it needs me to import from components/ui and gives an error if importing from ui

ESLint 9 Compatibility Issue

pnpm lint and turbo lint error with follow error message, it looks like config files changed from EsLint 9.0.0 and up...

Fresh install of your app gives me base styles of button

for some reason I had to hard reset my cache to fix this issue