Registrar — Free School Management System Template
Registrar gives a school office a complete admin interface to start from. Registrars can check the day’s attendance and fee position on the dashboard, find any of 652 students, open a profile with guardians, grades and a fee ledger, take the morning register, record payments against invoices and look up the timetable for any class or teacher. Everything runs on Bootstrap 5 and plain JavaScript, with charts drawn in SVG and all demo data generated from small arrays you can swap for your own API.
Key features
- Dashboard with enrolment, attendance today, fees collected and staff present tiles, plus admissions, notices and upcoming exams
- SVG attendance trend and fee collection charts with hover and keyboard tooltips and a table view, no chart library
- Student directory with search, grade, section and status filters, sortable columns, pagination and CSV export
- Add-student off-canvas form with browser validation and a success state
- Student profile with details, guardians, a term attendance calendar heatmap, grades by subject, fee ledger and documents
- Attendance register by class and date with Present, Absent and Late toggles, reasons, mark all present, a live summary and saved registers
- Fee invoices with paid, partial and overdue filters, a record-payment modal that updates balances, and an overdue follow-up list
- Weekly timetable by class or by teacher, colour-coded by subject, with no teacher booked twice
- Collapsible sidebar that becomes an off-canvas menu on phones, topbar search, notifications and user menu
- Light and dark mode toggle remembered in localStorage
Best for
- School offices and registrars who need an internal student information system front end
- Developers prototyping a school ERP, SIS or attendance app
- Education startups building an admin panel for schools
- Anyone learning dashboard patterns with realistic data and no back end
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 7 pages: index.html, students.html, student.html, attendance.html, fees.html, timetable.html, login.html
- Charts drawn as inline SVG from small data arrays, no chart library
- Light and dark mode, responsive down to 375px, keyboard accessible
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Edit the page copy in the HTML files and the demo school, students, teachers and fees at the top of js/main.js, or replace those arrays with calls to your API. Colours and fonts live as custom properties at the top of css/style.css. The forms work in the browser only, so connect a back end or form service before launch. Deploy to any static host.
Frequently asked questions
Is Registrar free for commercial projects?
Yes. You can use it for personal and commercial projects, including client work. Attribution is optional but always welcome. The full terms are at uicookies.com/license.
What is it built with?
Bootstrap 5.3.8 for layout and components, one stylesheet for the design layer and one vanilla JavaScript file. There is no jQuery and no chart library; the charts are inline SVG drawn from small data arrays.
Which pages are included?
Seven: a dashboard, a student directory, a student profile, an attendance register, fees and invoices, a weekly timetable and a staff sign-in page. The profile opens for any student you pick in the directory.
Do the forms and registers save data?
Only in the browser. New students and payments last for the open tab, and saved attendance registers are kept in localStorage. To store records for real, connect the forms to your own back end or student information system.
Can I use it for my school’s real data?
Yes, it is a front end for that. The demo data is generated in one section of js/main.js, and the pages only read the student, invoice, class and teacher lists, so you can replace those builders with responses from your API.
