146 lines
5.6 KiB
Markdown
146 lines
5.6 KiB
Markdown
# π React Material Admin - A Free Material-UI Dashboard Template!
|
|
|
|
[View Demo](https://flatlogic.com/templates/react-material-admin-full/demo) | [Download](https://github.com/flatlogic/react-material-admin/archive/refs/heads/master.zip) | [More Templates](https://flatlogic.com/templates) | [Discord Community](https://discord.gg/flatlogic-community) | [Support Forum](https://flatlogic.com/forum)
|
|
|
|
**Originally a premium product priced at $99+, now available for free!** π
|
|
|
|
[](https://flatlogic.com/templates/react-material-admin-full/demo)
|
|
|
|
Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web App Generator](https://flatlogic.com/generator) - our new tool, sort of a template++.
|
|
|
|
---
|
|
|
|
## π― Why React Material Admin?
|
|
- **Ex-Premium**: This template was previously paid. Enjoy it for free now. π
|
|
- **Material-UI Based**: Built with Material-UI for a modern and sleek UI.
|
|
- **Join the Community**: [Flatlogic Discord](https://discord.gg/flatlogic-community) is where the action happens.
|
|
- **Free Node.js Backend**: Pair it up with [this backend](https://github.com/flatlogic/nodejs-backend) to go full-stack.
|
|
|
|
---
|
|
|
|
## π Quick Start
|
|
|
|
1. **Clone the repo**
|
|
```bash
|
|
git clone https://github.com/flatlogic/react-material-admin.git
|
|
cd react-material-admin
|
|
```
|
|
2. **Use Node.js 22.x (recommended) or 20.19+**
|
|
```bash
|
|
node -v
|
|
```
|
|
3. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
4. **Run frontend-only mode (default)**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
5. **Enable backend mode (optional)**
|
|
- Create `.env.local`:
|
|
```bash
|
|
VITE_BACKEND=true
|
|
```
|
|
- Start backend API on `http://localhost:8080`
|
|
- Run:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
6. **Build for production**
|
|
```bash
|
|
npm run build
|
|
```
|
|
7. **Preview production build (optional)**
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
---
|
|
|
|
## π Current Stack Snapshot
|
|
|
|
- React `19.2.4`
|
|
- MUI `7.x` + Emotion
|
|
- React Router `7.x` (`BrowserRouter`, hooks API)
|
|
- Context-based state for auth/users/layout/theme
|
|
- Vite `7.x` + `@vitejs/plugin-react-swc`
|
|
- Vitest `4.x` smoke tests + GitHub Actions CI (`lint`, `build`, `test`)
|
|
- Frontend-only users/auth fallback is available when backend is disabled
|
|
|
|
---
|
|
|
|
## 𧩠Features
|
|
|
|
- Three Color Themes
|
|
- Fully Responsive
|
|
- React 19
|
|
- MUI 7
|
|
- Authentication System
|
|
- Modular Architecture
|
|
- Charts Libraries
|
|
- Dashboard Pages
|
|
- CSS-in-JS Styling
|
|
- Vite-based build setup
|
|
|
|
---
|
|
|
|
## π Built With
|
|
|
|
- React 19
|
|
- MUI 7
|
|
- React Hooks & Context API
|
|
- React Router v7
|
|
- Vite 7 + SWC React plugin
|
|
- Vitest + Testing Library
|
|
- Node.js (for backend)
|
|
|
|
---
|
|
|
|
## π¦ Components
|
|
|
|
- UI Elements (Buttons, Modals, Forms)
|
|
- Charts (Line, Bar, Pie)
|
|
- Authentication (Login, Signup)
|
|
- Tables (Static, Dynamic)
|
|
- Profile Page
|
|
- Notifications
|
|
|
|
---
|
|
|
|
## π Available Variants
|
|
|
|
| | **Material** | **Transparent** | **Classic** | **Sofia** | **Flatlogic** |
|
|
|---------------|-----------------------------------------------------------|---------------------------------------------------------|-------------------------------------------------------|-----------------------------------------------------|----------------------------------------------------|
|
|
| **React** | [React Material Admin](https://github.com/flatlogic/react-material-admin) | [Light Blue React](https://github.com/flatlogic/light-blue-react) | [Sing App React](https://github.com/flatlogic/sing-app-react) | [Sofia React](https://github.com/flatlogic/sofia-react) | [One React](https://github.com/flatlogic/one-react) |
|
|
| **Angular** | [Angular Material Admin](https://github.com/flatlogic/angular-material-admin-full) | [Light Blue Angular](https://github.com/flatlogic/light-blue-angular) | [Sing App Angular](https://github.com/flatlogic/sing-app-angular) | - | - |
|
|
| **Vue** | [Material Vue](https://github.com/flatlogic/material-vue-full) | [Light Blue Vue](https://github.com/flatlogic/light-blue-vue) | [Sing App Vue](https://github.com/flatlogic/sing-app-vue-dashboard) | - | - |
|
|
| **Bootstrap** | - | [Light Blue HTML5](https://github.com/flatlogic/light-blue-html5) | [Sing App HTML5](https://github.com/flatlogic/sing-app-html5) | - | [One Bootstrap](https://github.com/flatlogic/one-bootstrap-template-full) |
|
|
|
|
|
|
Additionally, these templates are tailored for specific business needs:
|
|
- [E-Commerce Frontend (React)](https://github.com/flatlogic/ecommerce-frontend) - A complete e-commerce solution.
|
|
- [Bookkeeper UI (React)](https://github.com/flatlogic/bookkeeper-ui) - Accounting dashboard for finance management.
|
|
- [User Management Template (React)](https://github.com/flatlogic/user-management-template) - User authentication and management.
|
|
|
|
---
|
|
|
|
## π¨βπ» How to Contribute
|
|
|
|
- **Star this repo β** - show some love.
|
|
- **Report bugs** - but be nice.
|
|
- **Join the [Discord](https://discord.gg/flatlogic-community)** - meet fellow devs.
|
|
|
|
---
|
|
|
|
## π₯ About Flatlogic
|
|
|
|
[Flatlogic](https://flatlogic.com/ai-software-development-agent) builds modern business software so you don't have to. Our AI Software Development Agent helps you generate, deploy, and maintain enterprise applications with minimal effort.
|
|
|
|
---
|
|
|
|
> **Questions or feedback?**
|
|
> Join our [Flatlogic Community Discord](https://discord.gg/flatlogic-community) or visit our [support forum](https://flatlogic.com/forum). We might even reply!
|
|
|
|
---
|