💄 Radia – AI Beauty Assistant UI Template

Radia is a beautiful and intelligent SaaS frontend UI template tailored for skincare, beauty tech, and wellness platforms. Built with Next.js 14, Tailwind CSS 3, and Shadcn UI, Radia combines elegant design with AI-driven UX patterns to empower users with personalized skincare insights, routine planning, and product recommendations.

✨ UI & Usability Highlights

  • ✅ Modern, clean UI with accessible components

  • 🌗 Supports Dark Mode

  • 📱 Fully responsive for all screen sizes

  • 🎨 Subtle animations and aesthetic gradients

  • 📊 Built-in chart components for data visualization

  • 🧼 Organized, scalable codebase

  • 🔌 API-ready and easy to customize

  • 🧭 Intuitive navigation for beauty-focused experiences

💅 Core AI & Beauty Features (UI-ready)

  • 🧠 AI-powered insights based on user’s skin profile

  • 🧴 Personalized skincare routine generator via AI

  • 🛍️ Product recommendations tailored to skin type/concerns

  • 📊 Skincare analytics and usage patterns

  • 🖼️ Realtime Skin Image Analysis – upload face image, get AI feedback

  • 💬 AI Skincare Chat Assistant:

    • Chat about skincare routines

    • Upload image in chat and get AI analysis inline

    • Receive product suggestions directly inside chat

  • 📓 Skin Journal for tracking routines, reactions, and improvements

🚀 Getting Started

  1. Download & Unzip
    After purchasing and downloading the ZIP file, unzip it. Inside, you’ll find a folder named

    radia

  2. Navigate to the Project
    Open your terminal or command line, and navigate to the folder:

    cd radia

  3. Install Dependencies
    Run the following command to install all required packages:

    npm install

  4. Run the Development Server
    Once installation completes, start the development server:

    npm run dev

  5. Visit the App
    Open your browser and visit:

    http://localhost:3000

  6. Start Customizing
    Open the project in your favorite code editor (e.g., VS Code) and begin customizing:

    • 🎨 Change Colors: Update color palette in tailwind.config.ts or use global Find & Replace

    • 🔠 Change Fonts: Update fonts in global styles or Tailwind config

    • 📁 Add Pages or Components: Extend UI from the organized components/ and app/ folders

    • ⚙️ Integrate APIs: Hook up real data by integrating your backend endpoints