Next.js 15 Modus Boilerplate

A comprehensive development boilerplate combining Next.js 15, React 19, TypeScript, ShadCN UI, Modus Design System, and AI-powered development tools for modern web applications.

Next.js 15
React 19
TypeScript
ShadCN UI
Modus Icons
Cursor AI
Tailwind CSS

Boilerplate Features

layersModern Framework
  • • Next.js 15 with App Router
  • • React 19 Server Components
  • • TypeScript strict mode
  • • Modern React patterns
mixAI Integration
  • • Cursor AI configuration
  • • Project-specific rules
  • • Intelligent code generation
  • • Quality enforcement
paletteDesign System
  • • Modus Design System
  • • ShadCN UI components
  • • Dark/light mode support
  • • CSS custom properties
codeDeveloper Experience
  • • Hot reload with Turbopack
  • • ESLint configuration
  • • Component showcases
  • • Interactive documentation
appsComponent Library
  • • 50+ ShadCN components
  • • 32 calendar variations
  • • 4 custom components
  • • Interactive showcases
accessibilityQuality Standards
  • • WCAG 2.1 AA compliance
  • • Responsive design
  • • Performance optimized
  • • SEO-friendly structure

Project Architecture

A well-organized, scalable structure designed for enterprise applications and rapid development.

Project Structure
.
├── .cursor/                          # Cursor AI configuration and rules
│   ├── rules/                        # Custom MDC rule files for AI assistance
│   │   ├── 1-framework-standards.mdc # Framework requirements and patterns
│   │   ├── 2-styling-design-system.mdc # Styling & Design System standards
│   │   ├── 3-code-quality-standards.mdc # Code quality and performance
│   │   ├── 4-modus-icons-reference.mdc # Modus Icons validation reference
│   │   ├── 5-validation-workflow.mdc # Development workflow and validation
│   │   └── modus-icon-names.mdc     # Complete list of valid Modus icon names
│   └── mcp.json                     # Model Context Protocol configuration
├── add_these_manually/              # Manual setup documentation
│   ├── cursor-memories-guide.md     # Guide for Cursor AI memory management
│   └── user-rule.md                 # Complete user rules and behavioral requirements
├── app/                             # Next.js 15 App Router directory
│   ├── favicon.ico                  # Application favicon
│   ├── globals.css                  # Global styles with CSS custom properties
│   ├── layout.tsx                   # Root layout with theme provider
│   ├── page.tsx                     # Main landing page with project overview
│   └── styled_components/           # Component showcase and demo section
│       ├── [slug]/                  # Dynamic routing for component demos
│       ├── components/              # Individual component showcase (50+ components)
│       ├── cursor-rules/            # Cursor AI rules demonstration page
│       ├── floating-toolbar/        # Floating toolbar component demo
│       ├── header/                  # Application header component demo
│       ├── mcp/                     # Model Context Protocol demonstration
│       ├── modus-icons/             # Modus Icons comprehensive demo
│       ├── side-pane/               # Side pane component demo
│       ├── toolbar-builder/         # Advanced toolbar builder utility
│       └── treeview/                # Tree view component demo
├── components/                       # Reusable React components library
│   ├── calendars/                    # 32 pre-built calendar variations
│   ├── charts/                       # Chart component library
│   ├── header/                       # Application header components
│   ├── panes/                        # Panel and pane components
│   ├── toolbars/                     # Toolbar component library
│   ├── treeview/                     # Tree view components
│   ├── ui/                           # ShadCN UI component library (50+ components)
│   ├── copy-button.tsx              # Clipboard copy functionality
│   ├── mode-toggle.tsx              # Light/dark theme switcher
│   └── theme-provider.tsx           # Theme context provider
├── hooks/                            # Custom React hooks
├── lib/                              # Utility functions and helpers
├── public/                           # Static assets served from root
│   ├── trimble_product_logos/       # Trimble product brand assets
│   ├── demo.png                     # Application demo screenshot
│   └── modus-logo.svg               # Modus design system logo
├── components.json                   # ShadCN UI configuration
├── eslint.config.mjs                # ESLint configuration with custom rules
├── next.config.ts                   # Next.js configuration
├── package.json                     # Project dependencies and scripts
├── project-structure.md             # Complete project documentation
├── README.md                        # Project overview and setup instructions
├── tailwind.config.js               # Tailwind CSS with Modus theme
└── tsconfig.json                    # TypeScript compiler configuration

Technology Stack

Tech Stack Configuration
{
  "framework": "Next.js 15",
  "react": "React 19",
  "styling": "Tailwind CSS v3",
  "components": "ShadCN/UI",
  "icons": "Modus Icons",
  "language": "TypeScript",
  "ai": "Cursor AI Integration",
  "features": [
    "App Router",
    "Server Components", 
    "Client Components",
    "CSS Custom Properties",
    "Dark/Light Theming",
    "Responsive Design",
    "AI-Assisted Development"
  ]
}
tuneKey Dependencies
Next.js
15.3.5
React
19.0.0
TypeScript
5.x
Tailwind CSS
3.4.17
Modus Icons
1.16.0

Cursor AI Integration

Enhanced development experience with intelligent code assistance and project-specific rules.

AI Configuration Overview
# Cursor AI Configuration

## Project Rules (.cursor/rules/)
- code-rules.mdc: Quality standards & best practices
- modus-icons-usage.mdc: Icon system validation
- new-components.mdc: Component development templates
- nextjs15-framework.mdc: Framework-specific patterns

## Benefits
✅ Intelligent code generation following project patterns
✅ Automatic enforcement of Modus design system
✅ Real-time validation of icon usage
✅ Context-aware assistance across sessions
✅ Consistent architecture and naming conventions