Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt

Use this file to discover all available pages before exploring further.

Until now, using shadcn/ui in a monorepo was a bit of a pain. You could add components using the CLI, but you had to manage where the components were installed and manually fix import paths. With the new monorepo support in the CLI, we’ve made it a lot easier to use shadcn/ui in a monorepo. The CLI now understands the monorepo structure and will install the components, dependencies and registry dependencies to the correct paths and handle imports for you.

​
Getting started

1
Create a new monorepo project
2
To create a new monorepo project, run the init command. You will be prompted to select the type of project you are creating.
3
npx shadcn@latest init
4
Select the Next.js (Monorepo) option.
5
? Would you like to start a new project?
    Next.js
❯   Next.js (Monorepo)
6
This will create a new monorepo project with two workspaces: web and ui, and Turborepo as the build system.
7
Everything is set up for you, so you can start adding components to your project.
8
The monorepo uses React 19 and Tailwind CSS v4.
9
Add components to your project
10
To add components to your project, run the add command in the path of your app.
11
cd apps/web
12
npx shadcn@latest add [COMPONENT]
13
The CLI will figure out what type of component you are adding and install the correct files to the correct path.
14
For example, if you run npx shadcn@latest add button, the CLI will install the button component under packages/ui and update the import path for components in apps/web.
15
If you run npx shadcn@latest add login-01, the CLI will install the button, label, input and card components under packages/ui and the login-form component under apps/web/components.
16
Importing components
17
You can import components from the @workspace/ui package as follows:
18
import { Button } from "@workspace/ui/components/button"
19
You can also import hooks and utilities from the @workspace/ui package.
20
import { useTheme } from "@workspace/ui/hooks/use-theme"
import { cn } from "@workspace/ui/lib/utils"

​
File Structure

When you create a new monorepo project, the CLI will create the following file structure: 
apps
└── web         # Your app goes here.
    ├── app
    │   └── page.tsx
    ├── components
    │   └── login-form.tsx
    ├── components.json
    └── package.json
packages
└── ui          # Your components and dependencies are installed here.
    ├── src
    │   ├── components
    │   │   └── button.tsx
    │   ├── hooks
    │   ├── lib
    │   │   └── utils.ts
    │   └── styles
    │       └── globals.css
    ├── components.json
    └── package.json
package.json
turbo.json

​
Requirements

  1. Every workspace must have a components.json file. A package.json file tells npm how to install the dependencies. A components.json file tells the CLI how and where to install components.
  2. The components.json file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
apps/web/components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "../../packages/ui/src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "utils": "@workspace/ui/lib/utils",
    "ui": "@workspace/ui/components"
  }
}
packages/ui/components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@workspace/ui/components",
    "utils": "@workspace/ui/lib/utils",
    "hooks": "@workspace/ui/hooks",
    "lib": "@workspace/ui/lib",
    "ui": "@workspace/ui/components"
  }
}
  1. Ensure you have the same style, iconLibrary and baseColor in both components.json files.
  2. For Tailwind CSS v4, leave the tailwind config empty in the components.json file.
By following these requirements, the CLI will be able to install ui components, blocks, libs and hooks to the correct paths and handle imports for you.

Build docs developers (and LLMs) love

Get started for freeTalk to us