Shadcn Nx Nextjs Boilerplate

NX Monorepo Setup for Next.js 13 and shadcn/ui

This guide details setting up an NX monorepo with a Next.js 13 application, Tailwind CSS, and the shadcn/ui component library. It walks through initializing the workspace, integrating Next.js, configuring Tailwind for both the application and shadcn/ui, creating a shared UI library, and using the shadcn/ui CLI to add and manage components. The goal is to provide a structured and efficient development environment for building modern user interfaces.

Features:

• NX Monorepo Initialization: Instructions to create a new NX workspace using create-nx-workspace.
• Next.js Application Setup: Guide to add a Next.js application (@nx/next:app) within the monorepo.
• Tailwind CSS Integration: Detailed steps for installing and configuring Tailwind CSS, including postcss.config.js and tailwind.config.js for the Next.js app.
• PostCSS Configuration for Next.js: Specifies adding postcssConfig to the Next.js application's project.json.
• UI Components Library Generation: How to generate a dedicated library (@nx/next:library) for UI components and structure its contents.
• shadcn/ui Prerequisite Installation: Lists necessary dependencies like tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, and @radix-ui/react-icons.
• Tailwind CSS Configuration for shadcn/ui: Merging shadcn/ui's comprehensive theme settings (colors, borderRadius, keyframes, etc.) into the existing tailwind.config.js.
• Global CSS Customization for shadcn/ui: Instructions for updating apps/web/app/global.css with shadcn/ui base styles and CSS variables for light/dark modes.
• cn Utility Function Implementation: Adding the cn helper function using clsx and tailwind-merge to libs/ui-components/src/utils.ts for conditional class names.
• components.json Setup: Creating and configuring components.json at the monorepo root to define paths and settings for the shadcn/ui CLI.
• Root tsconfig.json for Path Aliases: Configuring baseUrl and paths in a root tsconfig.json to enable shadcn/ui CLI component generation into the correct library.
• shadcn/ui Component Addition via CLI: Demonstrates using npx shadcn-ui@latest add to install components like dropdown-menu.
• Component Export from UI Library: Guidance on exporting newly added shadcn/ui components from the shared UI library's index.ts.
• Component Import Path Correction: Notes the need to adjust cn import paths within generated shadcn/ui components to point to the shared utils.ts.
• Usage Example in Next.js Application: Shows how to import and utilize the shadcn/ui components (e.g., DropdownMenu) within a Next.js page.

Summary:

This project provides a comprehensive walkthrough for developers to establish an NX monorepo integrating Next.js 13 and shadcn/ui. It covers essential setup steps from workspace creation and Next.js app integration to detailed Tailwind CSS and shadcn/ui configuration. By following this guide, developers can create a scalable foundation for building applications with a consistent UI, leveraging the benefits of a monorepo structure and modern tooling.