VITARA - Medical And Digital Health Template

VITARA is not just a medical template; it is a comprehensive Health-Tech UI Kit. Built to bridge the gap between traditional clinical interfaces and modern startup aesthetics, VITARA offers 40+ meticulously designed pages. It is perfectly suited for hospitals, specialized clinics, wellness centers, telemedicine startups, and digital health platforms. Unlike traditional medical templates that rely on generic "clinical blue" and outdated 2015 layouts, VITARA utilizes a premium color palette (Warm Sage, Deep Forest, Lavender, Soft Canvas) to create an empathetic, humanist, and high-end patient experience.

Features

45+ Premium HTML Pages: Marketing, Patient Portal, Clinical Dashboard, and E-commerce.

• 3 Distinct Homepage Concepts:
  • index.html: Corporate Hospital / Premium Clinic
  • index-wellness.html: Mental Health / Wellness & Meditation
  • index-telehealth.html: Telemedicine Startup
• Immersive Patient Portal: Wearable data integration (Chart.js), prescriptions, lab results, and video telehealth UI.
• Advanced Clinical Dashboard: EMR/EHR layouts, patient scheduling, and analytics for doctors.
• Tailwind CSS v4: Fully utility-first, easily customizable via standard CSS variables.
• No Heavy Frameworks: Pure HTML, CSS, and lightweight vanilla JS for maximum integration flexibility (React, Vue, Laravel, etc.).
• Lucide Icons: Beautiful, consistent, open-source iconography.

Requirements

Ensure you have Node.js and npm installed on your system. This template uses the new @tailwindcss/cli for compilation.

Instructions

🚀 Quick Start

1. Requirements

Ensure you have Node.js and npm installed on your system. This template uses the new @tailwindcss/cli for compilation.

2. Getting Started

To view the template, simply open src/index.html in your web browser. No local server is strictly required to view the static files, though using a tool like VS Code Live Server is recommended.

3. Compiling CSS (Tailwind)

If you make changes to the HTML classes or want to modify the design system, you need to recompile the Tailwind CSS file. Run the following command from the root directory:

npx @tailwindcss/cli -i ./src/assets/css/vitara.css -o ./src/assets/css/vitara.min.css --watch

This will watch your HTML files for changes and update vitara.min.css automatically.