|
1 |
| -# React Material Admin Full — Material-UI Dashboard Template |
2 |
| - |
3 |
| -Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/). |
4 |
| -**No jQuery and Bootstrap!** |
5 |
| - |
6 |
| -**This version uses React 17, React Router v5, MaterialUI v5, built with React Hooks and React Context (No Redux)** |
7 |
| - |
8 |
| -[Demo](https://flatlogic.com/admin-dashboards/react-material-admin/demo). Use any credentials to log in. |
9 |
| - |
10 |
| -[](https://flatlogic.com/admin-dashboards/react-material-admin/demo) |
11 |
| - |
12 |
| -## Features |
13 |
| - |
14 |
| -- React (**18.2.0**) |
15 |
| -- React Hooks |
16 |
| -- React Context |
17 |
| -- **No jQuery and Bootstrap!** |
18 |
| -- Mobile friendly layout (responsive) |
19 |
| -- Create-react-app under the hood |
20 |
| -- React Router v5 |
21 |
| -- Material-UI v5 |
| 1 | +# 🚀 React Material Admin - A Free Material-UI Dashboard Template! |
| 2 | + |
| 3 | +[View Demo](https://flatlogic.com/templates/react-material-admin/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) |
| 4 | + |
| 5 | +**Originally a premium product priced at $99+, now available for free!** 🎉 |
| 6 | + |
| 7 | +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++. |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +## 🎯 Why React Material Admin? |
| 12 | +- **Ex-Premium**: This template was previously paid. Enjoy it for free now. 😉 |
| 13 | +- **Material-UI Based**: Built with Material-UI for a modern and sleek UI. |
| 14 | +- **Join the Community**: [Flatlogic Discord](https://discord.gg/flatlogic-community) is where the action happens. |
| 15 | +- **Free Node.js Backend**: Pair it up with [this backend](https://github.com/flatlogic/nodejs-backend) to go full-stack. |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## 🚀 Quick Start |
| 20 | + |
| 21 | +1. **Clone the repo** |
| 22 | + ```bash |
| 23 | + git clone https://github.com/flatlogic/react-material-admin.git |
| 24 | + cd react-material-admin |
| 25 | + ``` |
| 26 | +2. **Install dependencies** |
| 27 | + ```bash |
| 28 | + yarn install |
| 29 | + ``` |
| 30 | +3. **Run the app** |
| 31 | + ```bash |
| 32 | + yarn start |
| 33 | + ``` |
| 34 | +4. **Runs the app in the development mode without backend** |
| 35 | + ```bash |
| 36 | + yarn dev |
| 37 | + ``` |
| 38 | + |
| 39 | +5. **Build for production** |
| 40 | + ```bash |
| 41 | + yarn build |
| 42 | + ``` |
| 43 | + |
| 44 | +--- |
| 45 | + |
| 46 | +## 🧩 Features |
| 47 | + |
| 48 | +- Three Color Themes |
| 49 | +- Fully Responsive |
| 50 | +- React 16.14.0 + Hooks |
| 51 | +- Material-UI v4 |
| 52 | +- Authentication System |
22 | 53 | - Modular Architecture
|
23 |
| -- CSS-in-JS styles |
24 |
| -- Styled Components |
25 |
| -- Webpack build |
26 |
| -- Stylish, clean, responsive layout |
27 |
| -- Authentication |
28 |
| - |
29 |
| -## Pages |
30 |
| - |
31 |
| -We have implemented some basic pages, so you can see our template in action. |
32 |
| - |
33 |
| -- Profile |
34 |
| -- Dashboard |
35 |
| -- E-commerce (Product Management, Products Grid, Product Page) |
36 |
| -- Typography |
37 |
| -- Tables (Static, dynamic) |
38 |
| -- Forms |
39 |
| -- Notifications |
40 |
| -- Charts |
41 |
| -- Icons |
42 |
| -- Maps |
43 |
| -- Login |
44 |
| -- Error |
45 |
| - |
46 |
| -## Quick Start |
| 54 | +- Charts Libraries |
| 55 | +- Dashboard Pages |
| 56 | +- CSS-in-JS Styling |
| 57 | +- Create-React-App Under the Hood |
47 | 58 |
|
48 |
| -#### 1. Get the latest version |
| 59 | +--- |
49 | 60 |
|
50 |
| -You can start by cloning the latest version of React Material Admin on your |
51 |
| -local machine by running: |
| 61 | +## 🛠 Built With |
52 | 62 |
|
53 |
| -```shell |
54 |
| -$ git clone https://github.com/flatlogic/react-material-admin.git |
55 |
| -``` |
56 |
| - |
57 |
| -#### 2. Run `yarn install` |
58 |
| - |
59 |
| -This will install both run-time project dependencies and developer tools listed |
60 |
| -in [package.json](package.json) file. |
61 |
| - |
62 |
| -#### 3 Run `yarn dev` |
63 |
| -Runs the app in the development mode without backend |
64 |
| - |
65 |
| -#### 3.1 Run `yarn start` |
66 |
| - |
67 |
| -Runs the app in the development mode with nodejs-backend (https://github.com/flatlogic/nodejs-backend) |
68 |
| - |
69 |
| -Open http://localhost:3000 to view it in the browser. Whenever you modify any of the source files inside the `/src` folder, |
70 |
| -the module bundler ([Webpack](http://webpack.github.io/)) will recompile the |
71 |
| -app on the fly and refresh all the connected browsers. |
| 63 | +- React 16.14.0 |
| 64 | +- Material-UI v4 |
| 65 | +- React Hooks & Context API |
| 66 | +- React Router v5 |
| 67 | +- Webpack |
| 68 | +- Node.js (for backend) |
72 | 69 |
|
73 |
| -#### 4. Run `yarn build` |
| 70 | +--- |
74 | 71 |
|
75 |
| -Builds the app for production to the build folder. |
76 |
| -It correctly bundles React in production mode and optimizes the build for the best performance. |
| 72 | +## 📦 Components |
77 | 73 |
|
78 |
| -The build is minified and the filenames include the hashes. |
79 |
| -Your app is ready to be deployed! |
| 74 | +- UI Elements (Buttons, Modals, Forms) |
| 75 | +- Charts (Line, Bar, Pie) |
| 76 | +- Authentication (Login, Signup) |
| 77 | +- Tables (Static, Dynamic) |
| 78 | +- Profile Page |
| 79 | +- Notifications |
80 | 80 |
|
81 |
| -## Support |
| 81 | +--- |
82 | 82 |
|
83 |
| -For any additional information please refer to [Support forum](https://flatlogic.com/forum). |
| 83 | +## 👨💻 How to Contribute |
84 | 84 |
|
85 |
| -## How can I support developers? |
| 85 | +- **Star this repo ⭐** - show some love. |
| 86 | +- **Report bugs** - but be nice. |
| 87 | +- **Join the [Discord](https://discord.gg/flatlogic-community)** - meet fellow devs. |
86 | 88 |
|
87 |
| -- Star our GitHub repo :star: |
88 |
| -- [Tweet about it](https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-material-template&via=flatlogic). |
89 |
| -- Create pull requests, submit bugs, suggest new features or documentation updates :wrench: |
90 |
| -- Follow [@flatlogic on Twitter](https://twitter.com/flatlogic). |
91 |
| -- Subscribe to Flatlogic newsletter at [flatlogic.com](https://flatlogic.com/) |
92 |
| -- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup: |
| 89 | +--- |
93 | 90 |
|
94 |
| -## More from Flatlogic |
| 91 | +## 🔥 About Flatlogic |
95 | 92 |
|
96 |
| -- [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application |
97 |
| -- [Sing App](https://github.com/flatlogic/sing-app) - 💥 Free and open-source admin dashboard template built with Bootstrap 4 |
98 |
| -- [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✅ Pure css way to make inputs look prettier |
99 |
| -- [React Dashboard](https://github.com/flatlogic/react-dashboard) - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL |
100 |
| -- [Light Blue Dashboard](https://github.com/flatlogic/light-blue-dashboard) - 💦 Free and open-source admin dashboard template built with Bootstrap |
| 93 | +[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. |
101 | 94 |
|
102 |
| -## Premium themes |
| 95 | +--- |
103 | 96 |
|
104 |
| -Looking for premium themes and templates? Check out more [admin dashboard templates at flatlogic.com](https://flatlogic.com/admin-dashboards). |
| 97 | +> **Questions or feedback?** |
| 98 | +> Join our [Flatlogic Community Discord](https://discord.gg/flatlogic-community) or visit our [support forum](https://flatlogic.com/forum). We might even reply! |
105 | 99 |
|
106 |
| -## License |
| 100 | +--- |
107 | 101 |
|
108 |
| -[MIT](https://github.com/flatlogic/react-material-dashboard/blob/master/LICENSE.txt). |
0 commit comments