Nx Next Shadcn UI Starter

Nx, Next.js, and shadcn/ui: Monorepo Starter Kit

This starter repository provides a robust foundation for developers aiming to integrate the versatile shadcn/ui component library with Next.js applications, all managed within an efficient Nx monorepo. It champions a structured methodology for building scalable web applications by showcasing the creation and use of shared UI and utility libraries. A comprehensive Medium tutorial accompanies this starter, detailing each configuration step to ensure a seamless integration and a clear understanding of the monorepo's advantages.

Features:

• Nx Monorepo Structure: Optimized for organized and scalable Next.js development with shadcn/ui.
• shadcn/ui Integration: Pre-configured for seamless use of shadcn/ui components within the Next.js application.
• Shared UI Library: Establishes a dedicated library for shadcn/ui components, promoting reusability across projects.
• Shared Utility Library: Centralizes common utilities, such as the cn function for classnames and shared configurations.
• Next.js App Router: Utilizes the modern Next.js App Router for application structure.
• Tailwind CSS Integration: Comes with full Tailwind CSS support for styling applications and components.
• Shared Tailwind & Global CSS: Provides centralized Tailwind configuration and global styles, including CSS variables for easy theming.
• shadcn/ui CLI Ready: Includes components.json and necessary tsconfig adjustments for straightforward component generation using the shadcn-ui CLI.
• Light/Dark Mode Support: Inherits shadcn/ui's built-in support for light and dark themes through CSS variables.
• Accessibility Ready: Leverages shadcn/ui components, which are designed with accessibility (a11y) as a priority.
• Detailed Setup Guide: Accompanied by a comprehensive Medium tutorial to guide users through the setup process.
• Playwright E2E Testing Setup: Initial configuration for end-to-end testing using Playwright.
• Nx Cloud Caching Enabled: Configured to leverage Nx Cloud for potentially faster build times.

Summary:

This starter kit simplifies the setup of shadcn/ui within a Next.js and Nx monorepo environment. It provides a pre-configured structure for shared component libraries, Tailwind CSS integration, and CLI-based component generation. Developers can leverage this template to accelerate project initiation, ensuring a scalable and organized codebase from the outset, with detailed guidance available through an accompanying tutorial for a smooth development experience.