UpTurn AI - Premium SaaS UI Kit

UpTurn AI is a high-value, enterprise-grade AI SaaS UI Kit built with Next.js 15, Tailwind CSS 4, and React 19. Designed for marketplace approval (ThemeForest/Elite) and real-world scalability.

🚀 Key Features

Live Demo - Experience the premium feel instantly.

• 16+ Premium Pages: Landing, Dashboard, AI Tool Suite (Image, Chat, Video, Prompts), Analytics, Billing, Team, Settings, Auth Suite.
• Modern Tech Stack: Next.js 15 (App Router), React 19, TypeScript (Strict), Framer Motion.
• Global AI Infrastructure: Centralized state management via AppContext with Optimistic UI Updates using React 19 useOptimistic.
• RESTful AI Mocks: Standardized API routes returning 201 Created with rich metadata.
• Glassmorphism 2.0: A stunning, premium design language with custom HSL tokens.

🎨 Theming & Customization (Tailwind 4)

UpTurn AI is built for ease of customization. We use the new Tailwind CSS 4 architecture which handles variables via CSS @theme blocks.

Step-by-Step Color Customization

1. Open src/app/globals.css.
2. Locate the @theme block.
3. Update the HSL variables to match your brand:

@theme {
  --color-primary: hsl(262, 80%, 50%); /* Change this to your brand color */
  --color-accent: hsl(190, 90%, 50%);  /* Change this to your accent color */
}

� Prerequisites

• Node.js: 20.x or higher (LTS recommended)
• NPM: 10.x or higher
• Browser: Modern evergreen browsers (Chrome, Edge, Safari, Firefox)

�🛠️ Installation & Setup

1. Clone the repository.
2. Run npm install.
3. Start development server: npm run dev.
4. Build for production: npm run build.

📂 Project Structure

• src/app: Next.js 15 routes and API endpoints.
• src/components: Premium UI components and layout shells.
• src/context: Global state management (AppContext).
• src/hooks: Custom AI integration hooks (useAiGenerator).
• public: Core assets and licensing documentation.

📚 Documentation & Reports

For detailed information about the project architecture and features, please refer to the following reports included in the root directory:

• Technical Project Report: comprehensive technical details, folder structure, and feature audit.
• License: Commercial usage rights and restrictions.
• Walkthrough: Verify recent changes.

🛡️ Licensing

All images and assets provided are CC0 or properly licensed for redistribution within a template. See LICENSE.md for specific template usage rights.

🆘 Troubleshooting

• Hydration Mismatch: We use suppressHydrationWarning on the body tag for font-variable security.
• Port Conflict: Run npm run dev -- -p 3001 if port 3000 is occupied.
• Build cache: If encountering build issues, run rm -rf .next and try rebuilding.

---

© 2025 UpTurn AI. Built for Excellence.