Back to Templates

Schoolng

Free Academics & School

Schoolng is a highly polished, modern, and high-performance school administration dashboard template built with Angular 22+ and Tailwind CSS v4. Designed with Vercel-like dark-mode aesthetics, custom micro-interactions, and a Signals-first reactive architecture, it offers an outstanding user experience for managing student registries, schedules, classroom occupancies, GPA trends, and admissions growth.

Schoolng
Live Preview Get Source Code

Comprehensive Academic Features

  • Overview Dashboard: Academic overview tracking total active students, average attendance rates, classroom occupancy levels, real-time registrar logs, and upcoming exams.
  • Student & Teacher Registry: Interactive databases with full search capabilities, status filters (Active, On Leave, Suspended), quick pagination, profile details sidebar drawers, and quick deletion selectors.
  • Classes & Schedule Timelines: Tabbed layout displaying current schedules, class rosters, and scheduled exam dates, filtered dynamically by grade level and subject catalog.
  • GPA Performance Trends: Multi-series line chart displaying midterm GPA performance averages per grade-level cohort (Grade 9 through Grade 12), with curve colors matched to sidebar color categories.
  • Enrollment Growth Chart: Stacked column bar chart illustrating monthly student registration admissions and transfer intakes.

Sleek & Customizable Design System

  • Persistent Theme Switcher: Easily toggle between Dark and Light mode. Theme state is saved automatically to `localStorage` and toggled directly on the document root for full body-child compatibility.
  • Semantic Theme Tokens: Fully customized using CSS variables to separate layout colors from generic Utility boundaries, preventing conflicts when styling third-party components (like ApexCharts).
  • Staggered Animations: Smooth blurry slide-in entrance animations on lists and cards for a premium feel.
  • Fully Responsive Layout: Optimizations for mobile, tablet, and widescreen layouts, including mobile sidebar translation draw effects and click-outside close observers.

Modern & High-Performance Architecture

  • Angular Standalone Components: Clean, structured components following modern best practices without NgModules.
  • Signals Reactivity: Centralized state management in `SchoolService` uses Angular Signals for high-performance reactivity.
  • Smooth Resize Observers: Reactively handles chart resizing in response to sidebar collapses by scaling SVGs via CSS rules and executing delayed redrafts for crisp layouts.
  • AI-friendly Developer Guidelines: Dedicated developer guidelines (`AI_DEVELOPER_GUIDELINES.md`) provided for extending layouts or modifying theme components with LLMs.

What's Included

  • Full source code (Angular 22+ / Tailwind CSS v4)
  • Centralized Mock Database Services (SchoolService)
  • Dedicated AI developer extension rules (AI_DEVELOPER_GUIDELINES.md)
  • MIT Free Open-Source License

Tech Stack

Angular 22+Tailwind v4SignalsApexChartsDark ModeZoneless