Brightleaf - Elementary School Admin Dashboard React Template

Brightleaf is a modern admin dashboard template for elementary schools, built with React 19, TypeScript and Tailwind CSS 4. It gives the school front office, teachers and the school nurse one calm place to manage the school day: student and guardian records, allergy and health alerts, daily attendance, classrooms, grades and parent notices.

The package includes a marketing landing page, three authentication pages and a 13-screen management dashboard, all filled with realistic, fictional demo data. Every page is fully responsive, supports light and dark themes and is pre-rendered to static HTML, so the finished site runs on any web host without a server.

Pages included

• Landing page with live product preview
• Dashboard overview: enrollment, attendance chart, allergy watch, classroom check-in and nurse log
• Students and guardians: searchable roster with guardian contacts, bus route and dismissal plan
• Allergy and health alerts: severity-tagged allergy plans, medication cabinet and nurse log
• Daily attendance: one-tap present, late, absent and excused register with follow-ups
• Classrooms, grades and progress, staff directory
• School calendar, parent notices, bus and pickup, cafeteria menu, library and settings
• Sign in, sign up and password recovery

Features

• React 19, TypeScript, Tailwind CSS 4 and Vite
• File-based routing with TanStack Router
• Light and dark themes with a saved preference
• Collapsible sidebar and mobile navigation drawer
• 45+ reusable UI components built on Radix UI
• Charts with Recharts and icons from Lucide
• Design tokens in one CSS file for easy rebranding
• Static build for Apache, Nginx, Netlify, Vercel or shared hosting
• Clean code formatted with Prettier and checked with ESLint
• Detailed HTML documentation

Brightleaf is a front-end UI template. Connect it to your own backend or API to use real school data.