Template Documentation

Welcome to your new dashboard. This guide will help you understand the architecture and how to customize it.

Next.js 16 & React 19

Built with the latest Canary features. Full support for React Server Components (RSC), Actions, and the new React 19 transition APIs for ultra-fast UI updates.

// Tip:Leverage 'use client' and 'use server' directives for optimal bundle size.

Tailwind CSS v4 Engine

Utilizing the all-new CSS-first engine. We've moved away from heavy JS configurations to native CSS variables via @theme for lightning-fast build times.

// Tip:Edit oklch colors in globals.css to globally rebrand the entire dashboard.

Enterprise Security

Pre-configured with strict Content Security Policy (CSP), X-Frame-Options, and Referrer policies within next.config.ts to protect against XSS and Clickjacking.

// Tip:Review the 'headers' function in next.config.ts to manage security rules.

Advanced Animations

Framer Motion 12 integration with layoutId synchronization. This ensures smooth shared element transitions even when switching between complex tabs or routes.

// Tip:Check SettingsTabs.tsx to see AnimatePresence and layoutId in action.

Clean S.O.L.I.D Code

Strict adherence to S.O.L.I.D principles. Every component is modular, single-responsibility, and easy to extend without breaking existing logic.

// Tip:Follow the atomic design pattern in /components for consistent scaling.

Lighthouse 100 Focus

Optimized for the Core Web Vitals. Minimal CLS, optimized package imports, and intelligent font loading ensure a perfect score on Google Lighthouse.

// Tip:Run 'yarn build' and test with Lighthouse to verify the score.