|
1 | | -# material-tailwind-dashboard-react |
2 | | -Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design. |
| 1 | +# [Material Tailwind Dashboard React](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) |
| 2 | + |
| 3 | + [](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues?q=is%3Aissue+is%3Aclosed) |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +Material Tailwind Dashboard React is a _free_ Admin Template based on two popular front-end technologies: _Tailwind CSS & React_. It was built to simplify the developer's work and is comes with a fresh design inspired by Google's Material Design. All its components are built to fit perfectly with each other, while aligning to the material concepts. |
| 8 | + |
| 9 | +Save weeks of time and build your perfect dashboard with this powerful template! It features 120 fully coded components and 4 example pages if you want to get inspiration or just show something directly to your clients. This beautiful admin also comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar. |
| 10 | + |
| 11 | +Material Tailwind Dashboard React is built based on our very popular Material Kit (https://www.creative-tim.com/product/material-kit). It makes use of light, surface and movement. The general layout resembles sheets of paper following multiple layers, so that the depth and order is obvious. Inside the archive you will find multiple example pages on how to use all components. And, of course, every element is well-documented. |
| 12 | + |
| 13 | +## Table of Contents |
| 14 | + |
| 15 | +- [Versions](#versions) |
| 16 | +- [Demo](#demo) |
| 17 | +- [Quick Start](#quick-start) |
| 18 | +- [Documentation](#documentation) |
| 19 | +- [File Structure](#file-structure) |
| 20 | +- [Browser Support](#browser-support) |
| 21 | +- [Resources](#resources) |
| 22 | +- [Reporting Issues](#reporting-issues) |
| 23 | +- [Technical Support or Questions](#technical-support-or-questions) |
| 24 | +- [Licensing](#licensing) |
| 25 | +- [Useful Links](#useful-links) |
| 26 | + |
| 27 | +## Versions |
| 28 | + |
| 29 | +[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr) |
| 30 | +| React | |
| 31 | +| ----- | |
| 32 | + |
| 33 | +| [](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) |
| 34 | + |
| 35 | +## Demo |
| 36 | + |
| 37 | +- [Dashboard](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) |
| 38 | +- [Settings](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/settings?ref=readme-mtdr) |
| 39 | +- [Tables](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/tables?ref=readme-mtdr) |
| 40 | +- [Maps](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/maps?ref=readme-mtdr) |
| 41 | + |
| 42 | +## Quick start |
| 43 | + |
| 44 | +Quick start options: |
| 45 | + |
| 46 | +- Download from [Creative Tim](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr). |
| 47 | + |
| 48 | +## Terminal Commands |
| 49 | + |
| 50 | +1. Download and Install NodeJs from [NodeJs Official Page](https://nodejs.org/en/download/). |
| 51 | +2. Navigate to the root / directory and run npm install or (yarn install, if you're using yarn) to install our local dependencies. |
| 52 | + |
| 53 | +## Documentation |
| 54 | + |
| 55 | +Material Tailwind Dashboard React build using Material Tailwind and the documentation of Material Tailwind is hosted at [Material Tailwinl](https://material-tailwind.com/documentation/quick-start?ref=readme-mtdr). |
| 56 | + |
| 57 | +### What's included |
| 58 | + |
| 59 | +Within the download you'll find the following directories and files: |
| 60 | + |
| 61 | +``` |
| 62 | +Material Tailwind Dashboard React |
| 63 | + ├── material-tailwind-dashboard-react |
| 64 | + │ ├── public |
| 65 | + │ │ ├── index.html |
| 66 | + │ │ ├── favicon.ico |
| 67 | + │ │ └── apple-icon.png |
| 68 | + │ ├── src |
| 69 | + │ │ ├── assets |
| 70 | + │ │ │ ├── img/ |
| 71 | + │ │ │ └── styles/ |
| 72 | + │ │ ├── components |
| 73 | + │ │ │ ├── AdminNavbar.js |
| 74 | + │ │ │ ├── ChartBar.js |
| 75 | + │ │ │ ├── ChartLine.js |
| 76 | + │ │ │ ├── Footer.js |
| 77 | + │ │ │ ├── MapExample.js |
| 78 | + │ │ │ ├── PageVisitsCard.js |
| 79 | + │ │ │ ├── ProfileCard.js |
| 80 | + │ │ │ ├── SettingsForm.js |
| 81 | + │ │ │ ├── Sidebar.js |
| 82 | + │ │ │ ├── StatusCard.js |
| 83 | + │ │ │ ├── TableCard.js |
| 84 | + │ │ │ └── TrafficCard.js |
| 85 | + │ │ ├── Pages |
| 86 | + │ │ │ ├── Dashboard.js |
| 87 | + │ │ │ ├── Maps.js |
| 88 | + │ │ │ ├── Settings.js |
| 89 | + │ │ │ └── Tables.js |
| 90 | + │ │ ├── App.js |
| 91 | + │ │ ├── App.test.js |
| 92 | + │ │ ├── index.js |
| 93 | + │ │ ├── reportWebVitals.js |
| 94 | + │ │ └── setup.test.js |
| 95 | + │ ├── CHANGELOG.md |
| 96 | + │ ├── jsconfig.json |
| 97 | + │ ├── LICENSE |
| 98 | + │ ├── package.json |
| 99 | + │ ├── postcss.config.js |
| 100 | + │ ├── README.md |
| 101 | + │ ├── tailwind.config.js |
| 102 | + │ ├── yarn.lock |
| 103 | +``` |
| 104 | + |
| 105 | +## Browser Support |
| 106 | + |
| 107 | +At present, we officially aim to support the last two versions of the following browsers: |
| 108 | + |
| 109 | +<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64"> |
| 110 | + |
| 111 | +## Resources |
| 112 | + |
| 113 | +- [Live Preview](https://demos.creative-tim.com/material-tailwind-dashboard-react/#/?ref=readme-mtdr) |
| 114 | +- [Download Page](https://www.creative-tim.com/product/material-tailwind-dashboard-react?ref=readme-mtdr) |
| 115 | +- Documentation is [here](https://material-tailwind.com/documentation/quick-start?ref=readme-mtdr) |
| 116 | +- [License Agreement](https://www.creative-tim.com/license?ref=readme-mtdr) |
| 117 | +- [Support](https://www.creative-tim.com/contact-us?ref=readme-mtdr) |
| 118 | +- Issues: [Github Issues Page](https://github.com/creativetimofficial/material-tailwind-dashboard-react/issues) |
| 119 | + |
| 120 | +## Reporting Issues |
| 121 | + |
| 122 | +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: |
| 123 | + |
| 124 | +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). |
| 125 | +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. |
| 126 | +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. |
| 127 | + |
| 128 | +## Technical Support or Questions |
| 129 | + |
| 130 | +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. |
| 131 | + |
| 132 | +## Licensing |
| 133 | + |
| 134 | +- Copyright 2021 [Creative Tim](https://www.creative-tim.com?ref=readme-mtdr) |
| 135 | +- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mtdr) |
| 136 | + |
| 137 | +## Useful Links |
| 138 | + |
| 139 | +- [More products](https://www.creative-tim.com/templates?ref=readme-mtdr) from Creative Tim |
| 140 | + |
| 141 | +- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) |
| 142 | + |
| 143 | +- [Freebies](https://www.creative-tim.com/templates/free?ref=readme-mtdr) from Creative Tim |
| 144 | + |
| 145 | +- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mtdr) (earn money) |
| 146 | + |
| 147 | +##### Social Media |
| 148 | + |
| 149 | +Twitter: <https://twitter.com/CreativeTim> |
| 150 | + |
| 151 | +Facebook: <https://www.facebook.com/CreativeTim> |
| 152 | + |
| 153 | +Dribbble: <https://dribbble.com/creativetim> |
| 154 | + |
| 155 | +Google+: <https://plus.google.com/+CreativetimPage> |
| 156 | + |
| 157 | +Instagram: <https://instagram.com/creativetimofficial> |
0 commit comments