LNĐ
Lộc Nguyễn Đình

Theme Context - Copy this React, Mui Component to your project

Design a modern, user friendly student dashboard interface for Ho Chi Minh City Open University, supporting multiple themes (light, dark, and system) and providing essential student information. Built with React, styled using Bootstrap with CSS variables for theme flexibility, and managed with Context API or Redux for application state, the dashboard should feature a primary blue and white color scheme, be fully responsive across desktop, mobile, and tablet, and include a clear UI structure. Key sections in the navigation bar include Home, Personal Information, Edit Information, Change Password, Academic Results, and Settings, each with recognizable icons. The main content area should use cards and tables to present detailed student information (e.g., name, birth date, gender, contact details, class, faculty) and academic results, with a default profile image that users can replace. Features include editable personal information (excluding student ID) with a confirmation step, password changes with old password verification, and a visually represented grade tracker using a chart library like Chart.js. The theme switching feature should save user preferences in local storage or application state for persistence. UX should prioritize ease of use, clear notifications for key actions (such as updates or password changes), subtle UI effects for better interactivity, and helpful tooltips on key icons or features, ensuring the dashboard is intuitive and supportive for all users.

Prompt
Component Preview

About

ThemeContext - Create a responsive student dashboard with light, dark themes, and user settings. Built with React and MUI. Get free template!

Share

Last updated 1 month ago