Back to Templates

Clinicng

Free Medical & Healthcare

Clinicng is a clean, modern, and fully responsive medical clinic dashboard template built with Angular 22+ and Tailwind CSS v4. Inspired by minimalist Vercel-like aesthetics, it delivers a polished workspace for managing patients, scheduling appointments (with dual card/calendar views), tracking clinical KPIs with interactive ApexCharts, and monitoring daily activity — all powered by a Signals-first reactive architecture with zoneless change detection.

Clinicng
Live Preview Get Source Code

Complete Clinical Dashboard

  • KPI Overview Dashboard: Real-time metrics for total patients, today's appointments, monthly revenue, and patient satisfaction — each with trend indicators and interactive ApexCharts (Area, Bar, Donut, RadialBar).
  • Patient Registry: Full patient database with search, status filters (Active, Critical, Inactive), responsive data table with hidden columns on mobile, and pagination controls.
  • Dual-View Appointments: Toggle between a card-based list view and a weekly calendar grid. The calendar displays appointments positioned by day and hourly time slots (8 AM – 5 PM), color-coded by type.
  • Activity Log & Today's Schedule: Live-updated recent activity feed and a today's appointments table with patient names, doctors, types, and status badges.
  • 4 Interactive ApexCharts: Patient Visits (Area), Revenue Breakdown (Bar), Department Load (Donut), and Patient Satisfaction (RadialBar) — all with hover tooltips, animations, and dark/light mode adaptation.

Sleek & Customizable Design System

  • Dual Theme Engine: High-contrast Dark Mode and clean Light Mode with persistent state via `localStorage`, toggled directly on the document root for full compatibility.
  • Semantic Theme Tokens: Custom CSS variables (`bg-theme-panel`, `border-theme-border`, `text-theme-text-main`) prevent selector conflicts and make dark/light transitions seamless across all components including ApexCharts.
  • Staggered Animations: Smooth blurry slide-in entrance animations on cards, charts, and tables using `.animate-blur-slide` with synchronized stagger timing per row.
  • Fully Responsive Layout: Optimized for mobile, tablet, and desktop. Mobile sidebar auto-closes on navigation, tables progressively hide columns, and CTAs adapt to full-width on small screens.

Modern & High-Performance Architecture

  • Angular Standalone Components: Clean, structured components following modern Angular 22+ best practices without NgModules, using inline templates and signals.
  • Signals-First Reactivity: Centralized state management in `ClinicService` using Angular Signals for high-performance, zoneless change detection.
  • Smooth Chart Resizing: Reactive handling of chart dimensions during sidebar collapses via CSS scaling and delayed window resize dispatches for crisp ApexCharts redraws.
  • AI-friendly Developer Guidelines: Dedicated `AI_DEVELOPER_GUIDELINES.md` with architecture specs, design system rules, step-by-step extension procedures, and ready-to-paste prompts for LLM-assisted development.

What's Included

  • Full source code (Angular 22+ / Tailwind CSS v4)
  • 3 feature pages (Dashboard, Patients, Appointments)
  • 4 interactive ApexCharts with dark mode support
  • Centralized Mock Database Service (ClinicService)
  • Dedicated AI developer extension rules (AI_DEVELOPER_GUIDELINES.md)
  • MIT Free Open-Source License

Tech Stack

Angular 22+Tailwind v4SignalsApexChartsDark ModeZoneless