Documentation built by Developers
Each element is well presented in very complex documentation.
You can read more about the documentation here.
Example Pages
If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.
View example pages here.
HELPFUL LINKS
- View Github Repository
- Check FAQ Page
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- MUI - The React UI library for faster and easier web development.
- React Table - Lightweight and extensible data tables for React.
- React Flatpickr - Useful library used to select date.
- React ChartJS 2 - Simple yet flexible React charting for designers & developers.
- Full Calendar - Full-sized drag & drop event calendar.
- Dropzone - An open source library that provides drag & drop file uploads with image previews.
- React Kanban - Kanban/Trello board lib for React.
- React Images Viewer - A simple, responsive images viewer component for ReactJS.
- React Quill - A free, open source WYSIWYG editor built for the modern web.
- Formik - Formik is the world's most popular open source form library for React and React Native.
- ChromaJS - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
- UUID - JavaScript library for generating random id numbers.
- HTML React Parser - A utility for converting HTML strings into React components.
- CASL - An isomorphic authorization JavaScript library which restricts what resources a given client is allowed to access
Let us know your thoughts below. And good luck with development!
- Versions
- Demo
- Quick Start
- Documentation
- Login
- Register
- Forgot Password
- Reset Password
- User Profile
- User Management
- Role Management
- Category Management
- Tag Management
- File Structure
- Browser Support
- Resources
- Reporting Issues
- Technical Support or Questions
- Licensing
- Useful Links
| React | Typescript |
|---|---|
 |
 |
| React + Laravel JSON:API | React + NodeJS |
|---|---|
 |
 |
| Register | Login |
|---|---|
 |
 |
| Forgot Password Page | Reset Password Page |
|---|---|
 |
 |
| Dashboard | RTL |
|---|---|
 |
 |
| Profile Page | User Management |
|---|---|
 |
 |
| Role Management | Item Management |
|---|---|
 |
 |
| Category Management | Tag Management |
|---|---|
 |
 |
Quick start options:
- Buy React Version from Creative Tim.
- Buy React + TypeScript Version from Creative Tim.
- Buy Reacr + Laravel JSON:API Version from Creative Tim.
- Buy React + Node.js API Version from Creative Tim.
The Laravel JSON:API backend project requires a working Apache/Nginx local environment with PHP, Composer and MySQL.
If you don't already have a local development environment, use one of the following links:
- Windows: How to install WAMP on Windows
- Linux & Mac: How to install LAMP on Linux & Mac
Install Composer: https://getcomposer.org/doc/00-intro.md
- Navigate in your Laravel API project folder:
cd your-laravel-json-api-project - Install project dependencies:
composer install - Create a new .env file:
cp .env.example .env - Add your own database credentials in the .env file in DB_DATABASE, DB_USERNAME, DB_PASSWORD
- Create users table:
php artisan migrate --seed - Generate application key:
php artisan key:generate - Install Laravel Passport:
php artisan passport:installand set in the .env file the CLIENT_ID and CLIENT_SECRET that you receive - Add your own mailtrap.io credentials in MAIL_USERNAME and MAIL_PASSWORD in the .env file
- Set up your api for the project
- Download and Install NodeJs LTS version from NodeJs Official Page.
- Navigate to the root ./ directory of the product and run
yarn installornpm installto install our local dependencies. - Add in your projeact an .env file with the variables
REACT_APP_URL=your-react-projectREACT_APP_API_URL=the-path-of-the-apiREACT_APP_IS_DEMO=false- if you use a local API you might need
REACT_APP_IMAGES=the-path-for-the-image
The documentation for the Material Dashboard is hosted at our website.
The documentation for the Laravel JSON:API is hoster here.
If a user is not logged in can access only the authentication pages: Login, Register and Forgot Password. By default, there are 3 different credentials that can be used for logging in:
- admin@jsonapi.com with password secret
- creator@jsonapi.com with password secret
- member@jsonapi.com with password secret
These credentials are for users with different roles so they have different access and rights.
Authentication context and protected routes were used to keep track of the state of the users and their permissions. Axios together with an HTTP service and helped by an auth service and crud service handled the requests. The /src/service keeps the logic of the services while /src/context has the logic for the different contexts used, including the authentication context.
In the /src/auth/login/index.js is the logic for logging in an existing user:
try {
const response = await AuthService.login(myData);
authContext.login(response.access_token, response.refresh_token);
} catch (res) {
if (res.hasOwnProperty("message")) {
setErrors({ ...errors, credentialsErros: true, textError: res.message });
} else {
setErrors({ ...errors, credentialsErros: true, textError: res.errors[0].detail });
}
}
It can be added a new user by registration. The user has a name, email, password and the confirmation of the password that needs to be added. All the inputs are verified and validated. You can simply access the page with the Sign up button or adding /register in the url. The new user will get the role of an admin by default and it can be changed in the user-management if you want to restrict its permissions.
In the /src/auth/register/index.js is the logic for signing up a new user:
const response = await AuthService.register(myData);
authContext.login(response.access_token, response.refresh_token);
In case of forgetting its password, the user can go to a page where he adds the email of the account and an email will be send to that address to help with resetting the password. It can be accessed from the Login page by clicking the here button or by adding /forgot-password.
In the /src/auth/forgot-password/index.js is the logic for requesting a password reset:
const myData = {
data: {
type: "password-forgot",
attributes: {
redirect_url: `${process.env.REACT_APP_URL}/auth/reset-password`,
...input,
},
},
};
try {
const res = await authService.forgotPassword(myData);
} catch (err) {
console.error(err);
return null;
}
For resetting the password, the user must acceess the url sent int the email. By adding the new password and the confirmation and then pressing the change button the data of the account is updated. You can go back to login from the button in notification.
In the /src/auth/reset-password/index.js is the logic for resetting the password:
useEffect(() => {
// get the token and email sent in the url
const queryParams = new URLSearchParams(window.location.search);
setToken(queryParams.get("token"));
setEmail(queryParams.get("email"));
}, []);
From the sidenav, in the CRUDs section, or by adding /examples-api/user-profile in the url, the User Profile is a dynamic page where the user can add details about him: profile image, name, email or change password. Validation is added for every input.
In the /src/services/auth-serivce you can find the routes sets for the request and in the /src/cruds/user-profile is the component for the editing the profile details.
getProfile = async () => {
const getProfile = "me";
return await HttpService.get(getProfile);
};
updateProfile = async (newInfo) => {
const updateProfile = "me";
return await HttpService.patch(updateProfile, newInfo);
};
In the User Management section only the user with admin role has permission to it. The admin can view, add, edit or delete other users. The + Add User button leads to the page for creating a new user where the details about the user are added and a role is assgined. In the Actions column of the table are the possibilites of updating or deleting the user.
In the /src/cruds/user-management you can find the component:
const getRows = (info) => {
let updatedInfo = info.map((row) => {
let roleId = row.relationships.roles.data[0].id;
let roleName = roles.find((role) => role.id == roleId);
return {
type: "users",
id: row.id,
image: row.attributes.profile_image,
name: row.attributes.name,
email: row.attributes.email,
role: roleName.attributes.name,
created_at: row.attributes.created_at,
};
});
return updatedInfo;
};
The Role Management section is another section for the admin. Here the admin can view, add, edit or delete roles. The + Add role button gets the user to the page for creating a new role, while the Actions column had the delete and edit buttons. A role that is assigned to a user can't be deleted. It is important to know the permissions of the 3 default roles of the application:
- the admin has all permissions (can view, add, edit or delete anything)
- the creator has limited access to category, tags and items section where he can also add, edit or delete
- the member has no permissions for the CRUDS
For managing the permissions CASL pacakge was used.
In the /src/App.js the permissions are taken and the abilities of the user are set according to the role:
useEffect(() => {
if (!authContext.isAuthenticated) return;
(async () => {
const id = await authContext.getCurrentUser();
const rules = await getPermissions(id);
ability.update(rules);
})();
}, [authContext.isAuthenticated]);
The category section can be viewed by users with the admin or creator type. A category can be added with the + Add category button and other updates in the Actions column of the table.
For showing or not the buttons for delete or edit in category section CASL helpe. In /src/cruds/category-management:
{ability.can("delete", "categories") && (
<Tooltip title="Delete Category">
<IconButton onClick={(e) => clickDeleteHandler(e, info.cell.row.original.id)}>
<DeleteIcon />
</IconButton>
</Tooltip>
)}
Tag Management is also availbale for all the users with the admin or creator role. The +Add tag button and the Actions buttons help with the actions.
In the /src/cruds/tag-management/new-tag is the logic for creating a tag:
try {
await CrudService.createTag(tag);
navigate("/examples-api/tag-management", {
state: { value: true, text: "The tag was sucesfully created" },
});
} catch (err) {
if (err.hasOwnProperty("errors")) {
setName({ ...name, error: true, textError: err.errors[0].detail });
}
console.error(err);
}
The Item Management section is a more complex CRUD because an item has associated a category and one or mare tags. The admin and creator can add an item with the + Add item button and delete or edit an item with the buttons from the Actions section.
In the /src/cruds/item-management is the component for viewing the items:
const response = await CrudService.getItems();
const myData = response.data;
const categories = await Promise.all(myData.map((item) => getCategory(item)));
const tags = await Promise.all(myData.map((item) => getTags(item)));
const toSetTags = [];
for (let i = 0; i < tags.length; i++) {
const element = tags[i].data.map((tag) => {
return {
key: `${i}-${tag.id}`,
name: tag.attributes.name,
color: tag.attributes.color,
};
});
toSetTags.push(element);
}
Within the download you'll find the following directories and files:
./src
├── App.js
├── assets
│ ├── images
│ │ ├── apple-icon.png
│ │ ├── bg-player.jpeg
│ │ ├── bg-pricing.jpg
│ │ ├── bg-profile.jpeg
│ │ ├── bg-reset-cover.jpeg
│ │ ├── bg-sign-in-basic.jpeg
│ │ ├── bg-sign-in-cover.jpeg
│ │ ├── bg-sign-up-cover.jpeg
│ │ ├── bg-smart-home-1.jpg
│ │ ├── bg-smart-home-2.jpg
│ │ ├── bruce-mars.jpg
│ │ ├── down-arrow-dark.svg
│ │ ├── down-arrow.svg
│ │ ├── down-arrow-white.svg
│ │ ├── drake.jpg
│ │ ├── ecommerce
│ │ │ ├── adidas-hoodie.jpeg
│ │ │ ├── alchimia-chair.jpeg
│ │ │ ├── bang-sound.jpeg
│ │ │ ├── black-chair.jpeg
│ │ │ ├── black-mug.jpeg
│ │ │ ├── blue-shoe.jpeg
│ │ │ ├── burberry.jpeg
│ │ │ ├── chair-pink.jpeg
│ │ │ ├── chair-steel.jpeg
│ │ │ ├── chair-wood.jpeg
│ │ │ ├── d&g-skirt.jpeg
│ │ │ ├── fendi-coat.jpeg
│ │ │ ├── gold-glasses.jpeg
│ │ │ ├── green-sofa.jpeg
│ │ │ ├── heron-tshirt.jpeg
│ │ │ ├── living-chair.jpeg
│ │ │ ├── macbook-pro.jpeg
│ │ │ ├── mcqueen-shirt.jpeg
│ │ │ ├── metro-chair.jpeg
│ │ │ ├── off-white-jacket.jpeg
│ │ │ ├── orange-sofa.jpeg
│ │ │ ├── photo-tools.jpeg
│ │ │ ├── undercover.jpeg
│ │ │ ├── wooden-table.jpeg
│ │ │ ├── yellow-chair.jpeg
│ │ │ └── yohji-yamamoto.jpeg
│ │ ├── favicon.png
│ │ ├── home-decor-1.jpg
│ │ ├── home-decor-2.jpg
│ │ ├── home-decor-3.jpg
│ │ ├── home-decor-4.jpeg
│ │ ├── icons
│ │ │ └── flags
│ │ │ ├── AU.png
│ │ │ ├── BR.png
│ │ │ ├── DE.png
│ │ │ ├── GB.png
│ │ │ └── US.png
│ │ ├── illustrations
│ │ │ ├── illustration-lock.jpg
│ │ │ ├── illustration-reset.jpg
│ │ │ ├── illustration-verification.jpg
│ │ │ └── pattern-tree.svg
│ │ ├── ivana-square.jpg
│ │ ├── ivana-squares.jpg
│ │ ├── ivancik.jpg
│ │ ├── kal-visuals-square.jpg
│ │ ├── logo-ct-dark.png
│ │ ├── logo-ct.png
│ │ ├── logos
│ │ │ ├── gray-logos
│ │ │ │ ├── logo-coinbase.svg
│ │ │ │ ├── logo-nasa.svg
│ │ │ │ ├── logo-netflix.svg
│ │ │ │ ├── logo-pinterest.svg
│ │ │ │ ├── logo-spotify.svg
│ │ │ │ └── logo-vodafone.svg
│ │ │ ├── mastercard.png
│ │ │ └── visa.png
│ │ ├── marie.jpg
│ │ ├── meeting.jpg
│ │ ├── office-dark.jpg
│ │ ├── product-12.jpg
│ │ ├── products
│ │ │ ├── product-11.jpg
│ │ │ ├── product-1-min.jpg
│ │ │ ├── product-2-min.jpg
│ │ │ ├── product-3-min.jpg
│ │ │ ├── product-4-min.jpg
│ │ │ ├── product-5-min.jpg
│ │ │ ├── product-6-min.jpg
│ │ │ ├── product-7-min.jpg
│ │ │ ├── product-details-1.jpg
│ │ │ ├── product-details-2.jpg
│ │ │ ├── product-details-3.jpg
│ │ │ ├── product-details-4.jpg
│ │ │ └── product-details-5.jpg
│ │ ├── shapes
│ │ │ ├── pattern-lines.svg
│ │ │ └── waves-white.svg
│ │ ├── small-logos
│ │ │ ├── bootstrap.svg
│ │ │ ├── creative-tim.svg
│ │ │ ├── devto.svg
│ │ │ ├── github.svg
│ │ │ ├── google-webdev.svg
│ │ │ ├── icon-bulb.svg
│ │ │ ├── icon-sun-cloud.png
│ │ │ ├── logo-asana.svg
│ │ │ ├── logo-atlassian.svg
│ │ │ ├── logo-invision.svg
│ │ │ ├── logo-jira.svg
│ │ │ ├── logo-slack.svg
│ │ │ ├── logo-spotify.svg
│ │ │ └── logo-xd.svg
│ │ ├── team-1.jpg
│ │ ├── team-2.jpg
│ │ ├── team-3.jpg
│ │ ├── team-4.jpg
│ │ └── team-5.jpg
│ ├── theme
│ │ ├── base
│ │ │ ├── borders.js
│ │ │ ├── boxShadows.js
│ │ │ ├── breakpoints.js
│ │ │ ├── colors.js
│ │ │ ├── globals.js
│ │ │ └── typography.js
│ │ ├── components
│ │ │ ├── appBar.js
│ │ │ ├── avatar.js
│ │ │ ├── breadcrumbs.js
│ │ │ ├── button
│ │ │ │ ├── contained.js
│ │ │ │ ├── index.js
│ │ │ │ ├── outlined.js
│ │ │ │ ├── root.js
│ │ │ │ └── text.js
│ │ │ ├── buttonBase.js
│ │ │ ├── card
│ │ │ │ ├── cardContent.js
│ │ │ │ ├── cardMedia.js
│ │ │ │ └── index.js
│ │ │ ├── container.js
│ │ │ ├── dialog
│ │ │ │ ├── dialogActions.js
│ │ │ │ ├── dialogContent.js
│ │ │ │ ├── dialogContentText.js
│ │ │ │ ├── dialogTitle.js
│ │ │ │ └── index.js
│ │ │ ├── divider.js
│ │ │ ├── flatpickr.js
│ │ │ ├── form
│ │ │ │ ├── autocomplete.js
│ │ │ │ ├── checkbox.js
│ │ │ │ ├── formControlLabel.js
│ │ │ │ ├── formLabel.js
│ │ │ │ ├── input.js
│ │ │ │ ├── inputLabel.js
│ │ │ │ ├── inputOutlined.js
│ │ │ │ ├── radio.js
│ │ │ │ ├── select.js
│ │ │ │ ├── switchButton.js
│ │ │ │ └── textField.js
│ │ │ ├── iconButton.js
│ │ │ ├── icon.js
│ │ │ ├── linearProgress.js
│ │ │ ├── link.js
│ │ │ ├── list
│ │ │ │ ├── index.js
│ │ │ │ ├── listItem.js
│ │ │ │ └── listItemText.js
│ │ │ ├── menu
│ │ │ │ ├── index.js
│ │ │ │ └── menuItem.js
│ │ │ ├── popover.js
│ │ │ ├── sidenav.js
│ │ │ ├── slider.js
│ │ │ ├── stepper
│ │ │ │ ├── index.js
│ │ │ │ ├── stepConnector.js
│ │ │ │ ├── stepIcon.js
│ │ │ │ ├── step.js
│ │ │ │ └── stepLabel.js
│ │ │ ├── svgIcon.js
│ │ │ ├── table
│ │ │ │ ├── tableCell.js
│ │ │ │ ├── tableContainer.js
│ │ │ │ └── tableHead.js
│ │ │ ├── tabs
│ │ │ │ ├── index.js
│ │ │ │ └── tab.js
│ │ │ └── tooltip.js
│ │ ├── functions
│ │ │ ├── boxShadow.js
│ │ │ ├── gradientChartLine.js
│ │ │ ├── hexToRgb.js
│ │ │ ├── linearGradient.js
│ │ │ ├── pxToRem.js
│ │ │ └── rgba.js
│ │ ├── index.js
│ │ └── theme-rtl.js
│ └── theme-dark
│ ├── base
│ │ ├── borders.js
│ │ ├── boxShadows.js
│ │ ├── breakpoints.js
│ │ ├── colors.js
│ │ ├── globals.js
│ │ └── typography.js
│ ├── components
│ │ ├── appBar.js
│ │ ├── avatar.js
│ │ ├── breadcrumbs.js
│ │ ├── button
│ │ │ ├── contained.js
│ │ │ ├── index.js
│ │ │ ├── outlined.js
│ │ │ ├── root.js
│ │ │ └── text.js
│ │ ├── buttonBase.js
│ │ ├── card
│ │ │ ├── cardContent.js
│ │ │ ├── cardMedia.js
│ │ │ └── index.js
│ │ ├── container.js
│ │ ├── dialog
│ │ │ ├── dialogActions.js
│ │ │ ├── dialogContent.js
│ │ │ ├── dialogContentText.js
│ │ │ ├── dialogTitle.js
│ │ │ └── index.js
│ │ ├── divider.js
│ │ ├── flatpickr.js
│ │ ├── form
│ │ │ ├── autocomplete.js
│ │ │ ├── checkbox.js
│ │ │ ├── formControlLabel.js
│ │ │ ├── formLabel.js
│ │ │ ├── input.js
│ │ │ ├── inputLabel.js
│ │ │ ├── inputOutlined.js
│ │ │ ├── radio.js
│ │ │ ├── select.js
│ │ │ ├── switchButton.js
│ │ │ └── textField.js
│ │ ├── iconButton.js
│ │ ├── icon.js
│ │ ├── linearProgress.js
│ │ ├── link.js
│ │ ├── list
│ │ │ ├── index.js
│ │ │ ├── listItem.js
│ │ │ └── listItemText.js
│ │ ├── menu
│ │ │ ├── index.js
│ │ │ └── menuItem.js
│ │ ├── popover.js
│ │ ├── sidenav.js
│ │ ├── slider.js
│ │ ├── stepper
│ │ │ ├── index.js
│ │ │ ├── stepConnector.js
│ │ │ ├── stepIcon.js
│ │ │ ├── step.js
│ │ │ └── stepLabel.js
│ │ ├── svgIcon.js
│ │ ├── table
│ │ │ ├── tableCell.js
│ │ │ ├── tableContainer.js
│ │ │ └── tableHead.js
│ │ ├── tabs
│ │ │ ├── index.js
│ │ │ └── tab.js
│ │ └── tooltip.js
│ ├── functions
│ │ ├── boxShadow.js
│ │ ├── gradientChartLine.js
│ │ ├── hexToRgb.js
│ │ ├── linearGradient.js
│ │ ├── pxToRem.js
│ │ └── rgba.js
│ ├── index.js
│ └── theme-rtl.js
├── auth
│ ├── forgot-password
│ │ └── index.js
│ ├── login
│ │ └── index.js
│ ├── logout
│ │ └── index.js
│ ├── register
│ │ └── index.js
│ └── reset-password
│ └── index.js
├── Can.js
├── components
│ ├── MDAlert
│ │ ├── index.js
│ │ ├── MDAlertCloseIcon.js
│ │ └── MDAlertRoot.js
│ ├── MDAvatar
│ │ ├── index.js
│ │ └── MDAvatarRoot.js
│ ├── MDBadge
│ │ ├── index.js
│ │ └── MDBadgeRoot.js
│ ├── MDBadgeDot
│ │ └── index.js
│ ├── MDBox
│ │ ├── index.js
│ │ └── MDBoxRoot.js
│ ├── MDButton
│ │ ├── index.js
│ │ └── MDButtonRoot.js
│ ├── MDDatePicker
│ │ └── index.js
│ ├── MDDropzone
│ │ ├── index.js
│ │ └── MDDropzoneRoot.js
│ ├── MDEditor
│ │ ├── index.js
│ │ └── MDEditorRoot.js
│ ├── MDInput
│ │ ├── index.js
│ │ └── MDInputRoot.js
│ ├── MDPagination
│ │ ├── index.js
│ │ └── MDPaginationItemRoot.js
│ ├── MDProgress
│ │ ├── index.js
│ │ └── MDProgressRoot.js
│ ├── MDSnackbar
│ │ ├── index.js
│ │ └── MDSnackbarIconRoot.js
│ ├── MDSocialButton
│ │ ├── index.js
│ │ └── MDSocialButtonRoot.js
│ └── MDTypography
│ ├── index.js
│ └── MDTypographyRoot.js
├── config
│ └── Permissions
│ └── index.js
├── context
│ └── index.js
├── crud.routes.js
├── cruds
│ ├── category-management
│ │ ├── edit-category
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── new-category
│ │ └── index.js
│ ├── item-management
│ │ ├── edit-item
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── new-item
│ │ └── index.js
│ ├── role-managament
│ │ ├── edit-role
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── new-role
│ │ └── index.js
│ ├── tag-management
│ │ ├── edit-tag
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── new-tag
│ │ └── index.js
│ ├── user-management
│ │ ├── edit-user
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── new-user
│ │ └── index.js
│ └── user-profile
│ ├── components
│ │ ├── BasicInfo
│ │ │ └── index.js
│ │ ├── ChangePassword
│ │ │ └── index.js
│ │ └── Header
│ │ └── index.js
│ └── index.js
├── examples
│ ├── Breadcrumbs
│ │ └── index.js
│ ├── Calendar
│ │ ├── CalendarRoot.js
│ │ └── index.js
│ ├── Cards
│ │ ├── BlogCards
│ │ │ └── SimpleBlogCard
│ │ │ └── index.js
│ │ ├── BookingCard
│ │ │ └── index.js
│ │ ├── ControllerCard
│ │ │ └── index.js
│ │ ├── InfoCards
│ │ │ ├── DefaultInfoCard
│ │ │ │ └── index.js
│ │ │ ├── MiniInfoCard
│ │ │ │ └── index.js
│ │ │ └── ProfileInfoCard
│ │ │ └── index.js
│ │ ├── MasterCard
│ │ │ └── index.js
│ │ ├── PricingCards
│ │ │ └── DefaultPricingCard
│ │ │ └── index.js
│ │ ├── ProjectCards
│ │ │ ├── ComplexProjectCard
│ │ │ │ └── index.js
│ │ │ └── DefaultProjectCard
│ │ │ └── index.js
│ │ └── StatisticsCards
│ │ ├── ComplexStatisticsCard
│ │ │ └── index.js
│ │ ├── DefaultStatisticsCard
│ │ │ └── index.js
│ │ └── MiniStatisticsCard
│ │ └── index.js
│ ├── Charts
│ │ ├── BarCharts
│ │ │ ├── HorizontalBarChart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── ReportsBarChart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ └── VerticalBarChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── BubbleChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── DoughnutCharts
│ │ │ └── DefaultDoughnutChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── LineCharts
│ │ │ ├── DefaultLineChart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── GradientLineChart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── ProgressLineChart
│ │ │ │ ├── config
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ └── ReportsLineChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── MixedChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── PieChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── PolarChart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── RadarChart
│ │ ├── configs
│ │ │ └── index.js
│ │ └── index.js
│ ├── Configurator
│ │ ├── ConfiguratorRoot.js
│ │ └── index.js
│ ├── Footer
│ │ └── index.js
│ ├── Items
│ │ ├── DefaultItem
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── NotificationItem
│ │ ├── index.js
│ │ └── styles.js
│ ├── LayoutContainers
│ │ ├── DashboardLayout
│ │ │ └── index.js
│ │ └── PageLayout
│ │ └── index.js
│ ├── Lists
│ │ ├── CategoriesList
│ │ │ └── index.js
│ │ └── ProfilesList
│ │ └── index.js
│ ├── Navbars
│ │ ├── DashboardNavbar
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── DefaultNavbar
│ │ ├── DefaultNavbarDropdown.js
│ │ ├── DefaultNavbarLink.js
│ │ ├── DefaultNavbarMobile.js
│ │ └── index.js
│ ├── ProtectedRoute
│ │ └── index.js
│ ├── Sidenav
│ │ ├── index.js
│ │ ├── SidenavCollapse.js
│ │ ├── SidenavItem.js
│ │ ├── SidenavList.js
│ │ ├── SidenavRoot.js
│ │ └── styles
│ │ ├── sidenavCollapse.js
│ │ ├── sidenavItem.js
│ │ └── sidenav.js
│ ├── Tables
│ │ ├── DataTable
│ │ │ ├── DataTableBodyCell.js
│ │ │ ├── DataTableHeadCell.js
│ │ │ └── index.js
│ │ └── SalesTable
│ │ ├── index.js
│ │ └── SalesTableCell.js
│ └── Timeline
│ ├── context
│ │ └── index.js
│ ├── TimelineItem
│ │ ├── index.js
│ │ └── styles.js
│ └── TimelineList
│ └── index.js
├── index.js
├── layouts
│ ├── applications
│ │ ├── calendar
│ │ │ ├── components
│ │ │ │ ├── Header
│ │ │ │ │ └── index.js
│ │ │ │ ├── NextEvents
│ │ │ │ │ └── index.js
│ │ │ │ └── ProductivityChart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── data
│ │ │ │ └── calendarEventsData.js
│ │ │ └── index.js
│ │ ├── data-tables
│ │ │ ├── data
│ │ │ │ └── dataTableData.js
│ │ │ └── index.js
│ │ ├── kanban
│ │ │ ├── components
│ │ │ │ ├── Card
│ │ │ │ │ └── index.js
│ │ │ │ └── Header
│ │ │ │ └── index.js
│ │ │ ├── data
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── wizard
│ │ ├── components
│ │ │ ├── About
│ │ │ │ └── index.js
│ │ │ ├── Account
│ │ │ │ └── index.js
│ │ │ ├── Address
│ │ │ │ └── index.js
│ │ │ └── FormField
│ │ │ └── index.js
│ │ └── index.js
│ ├── authentication
│ │ ├── components
│ │ │ ├── BasicLayout
│ │ │ │ └── index.js
│ │ │ ├── CoverLayout
│ │ │ │ └── index.js
│ │ │ ├── Footer
│ │ │ │ └── index.js
│ │ │ └── IllustrationLayout
│ │ │ └── index.js
│ │ ├── reset-password
│ │ │ └── cover
│ │ │ └── index.js
│ │ ├── sign-in
│ │ │ ├── basic
│ │ │ │ └── index.js
│ │ │ ├── cover
│ │ │ │ └── index.js
│ │ │ └── illustration
│ │ │ └── index.js
│ │ └── sign-up
│ │ └── cover
│ │ └── index.js
│ ├── dashboards
│ │ ├── analytics
│ │ │ ├── components
│ │ │ │ └── SalesByCountry
│ │ │ │ ├── data
│ │ │ │ │ └── salesTableData.js
│ │ │ │ └── index.js
│ │ │ ├── data
│ │ │ │ ├── reportsBarChartData.js
│ │ │ │ └── reportsLineChartData.js
│ │ │ └── index.js
│ │ └── sales
│ │ ├── components
│ │ │ ├── ChannelsChart
│ │ │ │ ├── data
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── DefaultCell
│ │ │ │ └── index.js
│ │ │ ├── ProductCell
│ │ │ │ └── index.js
│ │ │ └── RefundsCell
│ │ │ └── index.js
│ │ ├── data
│ │ │ ├── dataTableData.js
│ │ │ ├── defaultLineChartData.js
│ │ │ ├── horizontalBarChartData.js
│ │ │ └── salesTableData.js
│ │ └── index.js
│ ├── ecommerce
│ │ ├── orders
│ │ │ ├── order-details
│ │ │ │ ├── components
│ │ │ │ │ ├── BillingInformation
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── Header
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── OrderInfo
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── OrderSummary
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── PaymentDetails
│ │ │ │ │ │ └── index.js
│ │ │ │ │ └── TrackOrder
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ └── order-list
│ │ │ ├── components
│ │ │ │ ├── CustomerCell
│ │ │ │ │ └── index.js
│ │ │ │ ├── DefaultCell
│ │ │ │ │ └── index.js
│ │ │ │ ├── IdCell
│ │ │ │ │ └── index.js
│ │ │ │ └── StatusCell
│ │ │ │ └── index.js
│ │ │ ├── data
│ │ │ │ └── dataTableData.js
│ │ │ └── index.js
│ │ └── products
│ │ ├── edit-product
│ │ │ ├── components
│ │ │ │ ├── FormField
│ │ │ │ │ └── index.js
│ │ │ │ ├── Pricing
│ │ │ │ │ └── index.js
│ │ │ │ ├── ProductImage
│ │ │ │ │ └── index.js
│ │ │ │ ├── ProductInfo
│ │ │ │ │ └── index.js
│ │ │ │ └── Socials
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── new-product
│ │ │ ├── components
│ │ │ │ ├── FormField
│ │ │ │ │ └── index.js
│ │ │ │ ├── Media
│ │ │ │ │ └── index.js
│ │ │ │ ├── Pricing
│ │ │ │ │ └── index.js
│ │ │ │ ├── ProductInfo
│ │ │ │ │ └── index.js
│ │ │ │ └── Socials
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ └── product-page
│ │ ├── components
│ │ │ ├── DefaultCell
│ │ │ │ └── index.js
│ │ │ ├── ProductCell
│ │ │ │ └── index.js
│ │ │ ├── ProductImages
│ │ │ │ └── index.js
│ │ │ ├── ProductInfo
│ │ │ │ └── index.js
│ │ │ └── ReviewCell
│ │ │ └── index.js
│ │ ├── data
│ │ │ └── dataTableData.js
│ │ └── index.js
│ └── pages
│ ├── account
│ │ ├── billing
│ │ │ ├── components
│ │ │ │ ├── Bill
│ │ │ │ │ └── index.js
│ │ │ │ ├── BillingInformation
│ │ │ │ │ └── index.js
│ │ │ │ ├── Invoice
│ │ │ │ │ └── index.js
│ │ │ │ ├── Invoices
│ │ │ │ │ └── index.js
│ │ │ │ ├── PaymentMethod
│ │ │ │ │ └── index.js
│ │ │ │ ├── Transaction
│ │ │ │ │ └── index.js
│ │ │ │ └── Transactions
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── components
│ │ │ ├── BaseLayout
│ │ │ │ └── index.js
│ │ │ └── FormField
│ │ │ └── index.js
│ │ ├── invoice
│ │ │ └── index.js
│ │ └── settings
│ │ ├── components
│ │ │ ├── Accounts
│ │ │ │ └── index.js
│ │ │ ├── Authentication
│ │ │ │ └── index.js
│ │ │ ├── BasicInfo
│ │ │ │ ├── data
│ │ │ │ │ └── selectData.js
│ │ │ │ └── index.js
│ │ │ ├── ChangePassword
│ │ │ │ └── index.js
│ │ │ ├── DeleteAccount
│ │ │ │ └── index.js
│ │ │ ├── Header
│ │ │ │ └── index.js
│ │ │ ├── Notifications
│ │ │ │ └── index.js
│ │ │ ├── Sessions
│ │ │ │ └── index.js
│ │ │ ├── Sidenav
│ │ │ │ └── index.js
│ │ │ └── TableCell
│ │ │ └── index.js
│ │ └── index.js
│ ├── charts
│ │ ├── data
│ │ │ ├── bubbleChartData.js
│ │ │ ├── defaultDoughnutChartData.js
│ │ │ ├── defaultLineChartData.js
│ │ │ ├── gradientLineChartData.js
│ │ │ ├── horizontalBarChartData.js
│ │ │ ├── mixedChartData.js
│ │ │ ├── pieChartData.js
│ │ │ ├── polarChartData.js
│ │ │ ├── radarChartData.js
│ │ │ └── verticalBarChartData.js
│ │ └── index.js
│ ├── notifications
│ │ └── index.js
│ ├── pricing-page
│ │ ├── components
│ │ │ ├── Faq
│ │ │ │ └── index.js
│ │ │ ├── FaqCollapse
│ │ │ │ └── index.js
│ │ │ ├── Footer
│ │ │ │ └── index.js
│ │ │ ├── Header
│ │ │ │ └── index.js
│ │ │ ├── PricingCards
│ │ │ │ └── index.js
│ │ │ └── TrustedBrands
│ │ │ └── index.js
│ │ └── index.js
│ ├── profile
│ │ ├── all-projects
│ │ │ └── index.js
│ │ ├── components
│ │ │ └── Header
│ │ │ └── index.js
│ │ └── profile-overview
│ │ ├── components
│ │ │ └── PlatformSettings
│ │ │ └── index.js
│ │ ├── data
│ │ │ └── profilesListData.js
│ │ └── index.js
│ ├── projects
│ │ └── timeline
│ │ ├── data
│ │ │ └── timelineData.js
│ │ └── index.js
│ ├── rtl
│ │ ├── components
│ │ │ ├── Chart
│ │ │ │ ├── configs
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ ├── FullBody
│ │ │ │ └── index.js
│ │ │ ├── MediaPlayer
│ │ │ │ └── index.js
│ │ │ ├── OrdersOverview
│ │ │ │ └── index.js
│ │ │ ├── Steps
│ │ │ │ └── index.js
│ │ │ └── UpcomingEvents
│ │ │ └── index.js
│ │ ├── data
│ │ │ ├── calendarEventsData.js
│ │ │ ├── caloriesChartData.js
│ │ │ ├── categoriesListData.js
│ │ │ └── progressLineChartData.js
│ │ └── index.js
│ ├── users
│ │ └── new-user
│ │ ├── components
│ │ │ ├── Address
│ │ │ │ └── index.js
│ │ │ ├── FormField
│ │ │ │ └── index.js
│ │ │ ├── Profile
│ │ │ │ └── index.js
│ │ │ ├── Socials
│ │ │ │ └── index.js
│ │ │ └── UserInfo
│ │ │ └── index.js
│ │ ├── index.js
│ │ └── schemas
│ │ ├── form.js
│ │ ├── initialValues.js
│ │ └── validations.js
│ └── widgets
│ ├── components
│ │ ├── Chart
│ │ │ ├── configs
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── FullBody
│ │ │ └── index.js
│ │ ├── MediaPlayer
│ │ │ └── index.js
│ │ ├── OrdersOverview
│ │ │ └── index.js
│ │ ├── Steps
│ │ │ └── index.js
│ │ └── UpcomingEvents
│ │ └── index.js
│ ├── data
│ │ ├── calendarEventsData.js
│ │ ├── caloriesChartData.js
│ │ ├── categoriesListData.js
│ │ └── progressLineChartData.js
│ └── index.js
├── page.routes.js
├── routes.js
└── services
├── auth-service.js
├── cruds-service.js
├── http.service.js
└── interceptor.js
At present, we officially aim to support the last two versions of the following browsers:
- Live Preview
- Buy Page
- Documentation is here
- License Agreement
- Support
- Issues: Github Issues Page
We use GitHub Issues as the official bug tracker for the Material Dashboard 2 PRO React. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of the Material Dashboard 2 PRO React. Check the CHANGELOG from your dashboard on our website.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
If you have questions or need help integrating the product please contact us instead of opening an issue.
- Copyright 2022 Creative Tim
- Creative Tim license
-
More products from Creative Tim
-
Freebies from Creative Tim
-
Affiliate Program (earn money)
Twitter: https://twitter.com/CreativeTim?ref=mdl-readme
Facebook: https://www.facebook.com/CreativeTim?ref=mdl-readme
Dribbble: https://dribbble.com/creativetim?ref=mdl-readme
Instagram: https://www.instagram.com/CreativeTimOfficial?ref=mdl-readme
Twitter: https://twitter.com/updivision?ref=mdl-readme
Facebook: https://www.facebook.com/updivision?ref=mdl-readme
Linkedin: https://www.linkedin.com/company/updivision?ref=mdl-readme
Updivision Blog: https://updivision.com/blog/?ref=mdl-readme