](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr)
63 |
64 | | React |
65 | | ----- |
66 |
67 | | [](http://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr)
68 |
69 | ## Demo
70 |
71 | - [Dashboard page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/dashboard/home?ref=readme-mtdr)
72 | - [Profile page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/dashboard/profile?ref=readme-mtdr)
73 | - [Tables page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/dashboard/tables?ref=readme-mtdr)
74 | - [Notifications page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/dashboard/notifications?ref=readme-mtdr)
75 | - [Sign in page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/auth/sign-in?ref=readme-mtdr)
76 | - [Sign up page](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/auth/sign-up?ref=readme-mtdr)
77 |
78 | [View More](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr).
79 |
80 | ## Quick start
81 |
82 | Quick start options:
83 |
84 | - Download from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
85 |
86 | ## Deploy
87 |
88 | :rocket: You can deploy your own version of the template to Genezio with one click:
89 |
90 | [](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/material-tailwind-dashboard-react&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
91 |
92 | ## Terminal Commands
93 |
94 | 1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
95 | 2. Navigate to the root ./ directory of the product and run `npm install` or `yarn install` or `pnpm install` to install our local dependencies.
96 |
97 | ## Documentation
98 |
99 | The documentation for the Material Tailwind Dashboard React is hosted at our [website](https://material-tailwind.com/?ref=readme-mtdr).
100 |
101 | ### What's included
102 |
103 | Within the download you'll find the following directories and files:
104 |
105 | ```
106 | material-tailwind-dashboard-react
107 | ├── public
108 | │ ├── css
109 | │ └── img
110 | ├── src
111 | │ ├── configs
112 | │ ├── context
113 | │ ├── data
114 | │ ├── layouts
115 | │ ├── pages
116 | │ ├── widgets
117 | │ ├── App.jsx
118 | │ ├── main.jsx
119 | │ └── routes.jsx
120 | ├── .gitignore
121 | ├── CHANGELOG.md
122 | ├── index.html
123 | ├── ISSUE_TEMPLATE.md
124 | ├── jsconfig.json
125 | ├── LICENSE
126 | ├── package.json
127 | ├── postcsss.config.cjs
128 | ├── prettier.config.cjs
129 | ├── README.md
130 | ├── tailwind.config.cjs
131 | └── vite.config.js
132 | ```
133 |
134 | ## Browser Support
135 |
136 | At present, we officially aim to support the last two versions of the following browsers:
137 |
138 | 
139 |
140 | ## Resources
141 |
142 | - [Live Preview](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/dashboard/home?ref=readme-mtdr)
143 | - [Download Page](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr)
144 | - Documentation is [here](https://material-tailwind.com/?ref=readme-mtdr)
145 | - [License Agreement](https://www.creative-tim.com/license?ref=readme-mtdr)
146 | - [Support](https://www.creative-tim.com/contact-us?ref=readme-mtdr)
147 | - Issues: [Github Issues Page](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues)
148 | - [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website
149 |
150 | ## Reporting Issues
151 |
152 | We use GitHub Issues as the official bug tracker for the Material Tailwind Dashboard React. Here are some advices for our users that want to report an issue:
153 |
154 | 1. Make sure that you are using the latest version of the Material Tailwind Dashboard React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr).
155 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
156 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
157 |
158 | ## Technical Support or Questions
159 |
160 | If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-mtdr) instead of opening an issue.
161 |
162 | ## Licensing
163 |
164 | - Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr)
165 | - Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mtdr)
166 |
167 | ## Useful Links
168 |
169 | - [More products](https://www.creative-tim.com/templates?ref=readme-mtdr) from Creative Tim
170 |
171 | - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
172 |
173 | - [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-mtdr) from Creative Tim
174 |
175 | - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mtdr) (earn money)
176 |
177 | ##### Social Media
178 |
179 | Twitter:
37 |
38 | {routes.map(
39 | ({ layout, pages }) =>
40 | layout === "auth" &&
41 | pages.map(({ path, element }) => (
42 |
46 |
47 | );
48 | }
49 |
50 | Auth.displayName = "/src/layout/Auth.jsx";
51 |
52 | export default Auth;
53 |
--------------------------------------------------------------------------------
/src/layouts/dashboard.jsx:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from "react-router-dom";
2 | import { Cog6ToothIcon } from "@heroicons/react/24/solid";
3 | import { IconButton } from "@material-tailwind/react";
4 | import {
5 | Sidenav,
6 | DashboardNavbar,
7 | Configurator,
8 | Footer,
9 | } from "@/widgets/layout";
10 | import routes from "@/routes";
11 | import { useMaterialTailwindController, setOpenConfigurator } from "@/context";
12 |
13 | export function Dashboard() {
14 | const [controller, dispatch] = useMaterialTailwindController();
15 | const { sidenavType } = controller;
16 |
17 | return (
18 |
19 |
51 | );
52 | }
53 |
54 | Dashboard.displayName = "/src/layout/dashboard.jsx";
55 |
56 | export default Dashboard;
57 |
--------------------------------------------------------------------------------
/src/layouts/index.js:
--------------------------------------------------------------------------------
1 | export * from "@/layouts/dashboard";
2 | export * from "@/layouts/auth";
3 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | =========================================================
3 | * Material Tailwind Dashboard React - v2.1.0
4 | =========================================================
5 | * Product Page: https://www.creative-tim.com/product/material-tailwind-dashboard-react
6 | * Copyright 2023 Creative Tim (https://www.creative-tim.com)
7 | * Licensed under MIT (https://github.com/creativetimofficial/material-tailwind-dashboard-react/blob/main/LICENSE.md)
8 | * Coded by Creative Tim
9 | =========================================================
10 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
11 | */
12 | import React from "react";
13 | import ReactDOM from "react-dom/client";
14 | import App from "./App";
15 | import { BrowserRouter } from "react-router-dom";
16 | import { ThemeProvider } from "@material-tailwind/react";
17 | import { MaterialTailwindControllerProvider } from "@/context";
18 | import "../public/css/tailwind.css";
19 |
20 | ReactDOM.createRoot(document.getElementById("root")).render(
21 |
26 | setOpenConfigurator(dispatch, true)}
34 | >
35 |
37 |
38 | {routes.map(
39 | ({ layout, pages }) =>
40 | layout === "dashboard" &&
41 | pages.map(({ path, element }) => (
42 |
46 |
50 |
47 |
48 |
49 |
15 |
115 |
16 | Sign In
17 | Enter your email and password to Sign In.
18 |
19 |
113 |
114 |
116 | 
120 |
121 |
122 |
120 |
15 |
19 |
20 |
19 |
21 |
90 |
22 | Join Us Today
23 | Enter your email and password to register.
24 |
25 |
88 |
89 |
33 |
255 | );
256 | }
257 |
258 | export default Home;
259 |
--------------------------------------------------------------------------------
/src/pages/dashboard/index.js:
--------------------------------------------------------------------------------
1 | export * from "@/pages/dashboard/home";
2 | export * from "@/pages/dashboard/profile";
3 | export * from "@/pages/dashboard/tables";
4 | export * from "@/pages/dashboard/notifications";
5 |
--------------------------------------------------------------------------------
/src/pages/dashboard/notifications.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Typography,
4 | Alert,
5 | Card,
6 | CardHeader,
7 | CardBody,
8 | } from "@material-tailwind/react";
9 | import { InformationCircleIcon } from "@heroicons/react/24/outline";
10 |
11 | export function Notifications() {
12 | const [showAlerts, setShowAlerts] = React.useState({
13 | blue: true,
14 | green: true,
15 | orange: true,
16 | red: true,
17 | });
18 | const [showAlertsWithIcon, setShowAlertsWithIcon] = React.useState({
19 | blue: true,
20 | green: true,
21 | orange: true,
22 | red: true,
23 | });
24 | const alerts = ["gray", "green", "orange", "red"];
25 |
26 | return (
27 |
34 | {statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
35 |
44 | {footer.value}
45 | {footer.label}
46 |
47 | }
48 | />
49 | ))}
50 |
51 |
52 | {statisticsChartsData.map((props) => (
53 |
61 |
68 |
69 |
70 |
76 |
105 |
106 |
107 |
108 |
194 |
195 |
196 |
197 |
203 |
204 | Orders Overview
205 |
206 |
210 |
216 |
217 |
218 | {ordersOverviewData.map(
219 | ({ icon, color, title, description }, key) => (
220 |
252 |
253 |
254 |
77 |
78 | Projects
79 |
80 |
84 |
87 |
88 |
104 | |
115 | |
122 | )
123 | )}
124 | |||
|---|---|---|---|
|
138 |
139 |
148 | |
149 |
150 | {members.map(({ img, name }, key) => (
151 | |
164 |
165 | |
172 |
173 |
174 |
187 | |
188 |
221 |
249 | )
250 | )}
251 |
228 | {React.createElement(icon, {
229 | className: `!w-5 !h-5 ${color}`,
230 | })}
231 |
232 |
233 |
238 | {title}
239 |
240 |
245 | {description}
246 |
247 |
248 |
28 |
29 |
35 |
36 | Alerts
37 |
38 |
39 |
40 | {alerts.map((color) => (
41 | setShowAlerts((current) => ({ ...current, [color]: false }))}
46 | >
47 | A simple {color} alert with an example link. Give
48 | it a click if you like.
49 |
50 | ))}
51 |
52 |
53 |
54 |
60 |
61 | Alerts with Icon
62 |
63 |
64 |
65 | {alerts.map((color) => (
66 |
83 |
84 |
85 | );
86 | }
87 |
88 | export default Notifications;
89 |
--------------------------------------------------------------------------------
/src/pages/dashboard/profile.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardBody,
4 | CardHeader,
5 | CardFooter,
6 | Avatar,
7 | Typography,
8 | Tabs,
9 | TabsHeader,
10 | Tab,
11 | Switch,
12 | Tooltip,
13 | Button,
14 | } from "@material-tailwind/react";
15 | import {
16 | HomeIcon,
17 | ChatBubbleLeftEllipsisIcon,
18 | Cog6ToothIcon,
19 | PencilIcon,
20 | } from "@heroicons/react/24/solid";
21 | import { Link } from "react-router-dom";
22 | import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
23 | import { platformSettingsData, conversationsData, projectsData } from "@/data";
24 |
25 | export function Profile() {
26 | return (
27 | <>
28 |
29 |
30 |
31 |
34 |
73 |
35 |
54 |
43 |
44 | Richard Davis
45 |
46 |
50 | CEO / Co-Founder
51 |
52 |
53 |
55 |
56 |
57 |
58 |
61 |
62 |
65 |
66 |
69 |
70 |
71 |
72 |
74 |
111 |
112 |
113 |
114 |
115 | ),
116 | }}
117 | action={
118 |
75 |
76 | Platform Settings
77 |
78 |
101 |
79 | {platformSettingsData.map(({ title, options }) => (
80 |
100 |
81 |
82 | {title}
83 |
84 |
98 | ))}
99 |
85 | {options.map(({ checked, label }) => (
86 |
97 |
124 |
125 | Platform Settings
126 |
127 |
141 |
142 | -
128 | {conversationsData.map((props) => (
129 |
143 |
144 | Projects
145 |
146 |
150 | Architects design houses
151 |
152 |
215 |
153 | {projectsData.map(
154 | ({ img, title, description, tag, route, members }) => (
155 |
156 |
161 | 
166 |
167 |
168 |
172 | {tag}
173 |
174 |
179 | {title}
180 |
181 |
185 | {description}
186 |
187 |
188 |
189 |
190 |
193 |
194 |
210 |
211 | )
212 | )}
213 |
214 |
195 | {members.map(({ img, name }, key) => (
196 |
197 |
207 | ))}
208 |
209 |
17 |
18 |
19 |
20 | Authors Table
21 |
22 |
23 |
24 |
25 |
26 |
106 |
107 |
108 |
109 |
110 |
111 | Projects Table
112 |
113 |
114 |
115 |
116 |
117 |
215 |
216 |
217 |
218 | );
219 | }
220 |
221 | export default Tables;
222 |
--------------------------------------------------------------------------------
/src/routes.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | HomeIcon,
3 | UserCircleIcon,
4 | TableCellsIcon,
5 | InformationCircleIcon,
6 | ServerStackIcon,
7 | RectangleStackIcon,
8 | } from "@heroicons/react/24/solid";
9 | import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
10 | import { SignIn, SignUp } from "@/pages/auth";
11 |
12 | const icon = {
13 | className: "w-5 h-5 text-inherit",
14 | };
15 |
16 | export const routes = [
17 | {
18 | layout: "dashboard",
19 | pages: [
20 | {
21 | icon: |
32 | |
39 | ))}
40 | ||||
|---|---|---|---|---|
|
54 |
55 |
69 |
57 |
68 | |
70 |
71 | |
78 |
79 | |
86 |
87 | |
91 |
92 | |
100 |
|
124 | |
131 | )
132 | )}
133 | ||||
|---|---|---|---|---|
|
147 |
148 |
157 | |
158 |
159 | {members.map(({ img, name }, key) => (
160 | |
173 |
174 | |
181 |
182 |
183 |
196 | |
197 |
198 | |
209 |
7 |
29 | );
30 | }
31 |
32 | MessageCard.defaultProps = {
33 | action: null,
34 | };
35 |
36 | MessageCard.propTypes = {
37 | img: PropTypes.string.isRequired,
38 | name: PropTypes.string.isRequired,
39 | message: PropTypes.node.isRequired,
40 | action: PropTypes.node,
41 | };
42 |
43 | MessageCard.displayName = "/src/widgets/cards/message-card.jsx";
44 |
45 | export default MessageCard;
46 |
--------------------------------------------------------------------------------
/src/widgets/cards/profile-info-card.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import {
3 | Card,
4 | CardHeader,
5 | CardBody,
6 | Typography,
7 | } from "@material-tailwind/react";
8 |
9 | export function ProfileInfoCard({ title, description, details, action }) {
10 | return (
11 |
8 |
27 | {action}
28 |
15 |
20 | {name}
21 |
22 |
23 | {message}
24 |
25 |
26 | 34 | ) : null} 35 | {details && ( 36 |
-
37 | {Object.keys(details).map((el, key) => (
38 |
-
39 |
44 | {el}: 45 | 46 | {typeof details[el] === "string" ? ( 47 |51 | {details[el]} 52 | 53 | ) : ( 54 | details[el] 55 | )} 56 |
57 | ))}
58 |
47 |
190 |
48 |
53 |
54 |
59 | {layout}
60 |
61 |
62 |
67 | {page}
68 |
69 |
70 |
71 | {page}
72 |
73 |
74 |
75 | setOpenSidenav(dispatch, !openSidenav)}
83 | >
84 |
86 |
87 |
95 |
100 |
102 |
103 |
181 | setOpenConfigurator(dispatch, true)}
185 | >
186 |
188 |
189 |
76 |
77 |
78 | -
25 | {routes.map(({ name, path, icon }) => (
26 |
48 |
49 |
53 | {brandName}
54 |
55 |
56 | setOpenNav(!openNav)}
65 | >
66 | {openNav ? (
67 |
72 |
73 | {navList}
57 | {React.cloneElement(action, {
58 | className: "hidden lg:inline-block",
59 | })}
60 |
75 | {navList}
76 | {React.cloneElement(action, {
77 | className: "w-full block lg:hidden",
78 | })}
79 |
80 |