Monorepo integration

First, navigate to the directory where you want to set up Untitled UI. This could be your app directory or a shared components package:

cd apps/web
# or
cd packages/ui
# or wherever you want to initialize

Use the CLI to initialize Untitled UI in your existing monorepo web or ui package:

npx untitledui@latest init

Great! You're all set to start using Untitled UI components in your monorepo.

If something is missing, you can copy/paste what you need into your project directly from individual components pages.

Need help? Check our GitHub repository for examples, or open an issue if you run into any problems. Our community is here to help!

Create or update a components.json file in your components directory. The CLI will read this file to understand your custom alias paths:

{
  "aliases": {
    "components": "@workspace/ui/components",
    "utils": "@workspace/ui/utils",
    "styles": "@workspace/ui/styles",
    "hooks": "@workspace/ui/hooks"
  },
  "examples": "../../apps/web"
}

Working with example pages: Add "examples" key to specify where your web project is located in the monorepo. This allows the CLI to correctly resolve paths when adding example page files to your project.

Update your styles/globals.css to include component paths using @source:

@import "tailwindcss";
...
/* Adjust paths based on your monorepo structure */
@source "../**/*.{ts,tsx}";

Now you can add components using the CLI from your components directory:

npx untitledui@latest add button

The CLI will:

• Read your components.json configuration
• Use your custom alias paths in the generated components
• Install components in the correct directory structure
• Update imports to match your monorepo setup