Material Kit PRO React is a beautiful resource built for Material Design. It was made over the powerful Material-UI. We used and have redesigned all components to make it look flat, minimalist and easy to use. We are proud of this new Material-UI skin and the possibilities for customisation.
Using it is very simple and it will enable you to refresh you classic looking application. To get the desired effect you will also need to integrate ReactJS plugins that take a little bit more effort. In the end the result will be worth it.
Material Kit PRO React uses a framework built by our friend Olivier and his team - Material-UI and was created starting with create-react-app, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.
- Demo
- Quick Start
- Documentation
- File Structure
- Browser Support
- Resources
- Reporting Issues
- Technical Support or Questions
- Licensing
- Useful Links
- Buy from Creative Tim
The documentation for the Material Kit PRO React is hosted at our website.
Within the download you'll find the following directories and files:
material-kit-pro
.
├── CHANGELOG.md
├── README.md
├── package.json
├── .env
├── Documentation
│ ├── assets
│ │ ├── css
│ │ ├── img
│ │ │ └── faces
│ │ └── js
│ └── tutorial-components.html
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── assets
│ ├── img
│ │ ├── arrow-left.cur
│ │ ├── arrow-right.cur
│ │ ├── assets-for-demo
│ │ │ ├── example-pages
│ │ │ ├── ourClients
│ │ │ ├── presentationViewSectionComponent
│ │ │ └── sections
│ │ │ └── imgs.jsx
│ │ ├── examples
│ │ ├── faces
│ │ ├── flags
│ │ └── sections
│ ├── jss
│ │ ├── material-kit-pro-react
│ │ │ ├── components
│ │ │ └── views
│ │ │ ├── aboutUsSections
│ │ │ ├── blogPostSections
│ │ │ ├── blogPostsSections
│ │ │ ├── componentsSections
│ │ │ ├── ecommerceSections
│ │ │ ├── landingPageSections
│ │ │ ├── presentationSections
│ │ │ ├── pricingSections
│ │ │ └── sectionsSections
│ │ └── material-kit-pro-react.jsx
│ └── scss
│ ├── core
│ │ ├── mixins
│ │ └── variables
│ ├── plugins
│ └── material-kit-pro-react.scss
├── components
│ ├── Accordion
│ │ └── Accordion.jsx
│ ├── Badge
│ │ └── Badge.jsx
│ ├── Card
│ │ ├── Card.jsx
│ │ ├── CardAvatar.jsx
│ │ ├── CardBody.jsx
│ │ ├── CardFooter.jsx
│ │ └── CardHeader.jsx
│ ├── Clearfix
│ │ └── Clearfix.jsx
│ ├── CustomButtons
│ │ └── Button.jsx
│ ├── CustomDropdown
│ │ └── CustomDropdown.jsx
│ ├── CustomFileInput
│ │ └── CustomFileInput.jsx
│ ├── CustomInput
│ │ └── CustomInput.jsx
│ ├── CustomLinearProgress
│ │ └── CustomLinearProgress.jsx
│ ├── CustomTabs
│ │ └── CustomTabs.jsx
│ ├── CustomUpload
│ │ └── ImageUpload.jsx
│ ├── Footer
│ │ └── Footer.jsx
│ ├── Grid
│ │ ├── GridContainer.jsx
│ │ └── GridItem.jsx
│ ├── Header
│ │ ├── Header.jsx
│ │ └── HeaderLinks.jsx
│ ├── InfoArea
│ │ └── InfoArea.jsx
│ ├── Instruction
│ │ └── Instruction.jsx
│ ├── Media
│ │ └── Media.jsx
│ ├── NavPills
│ │ └── NavPills.jsx
│ ├── Pagination
│ │ └── Pagination.jsx
│ ├── Parallax
│ │ └── Parallax.jsx
│ ├── Snackbar
│ │ └── SnackbarContent.jsx
│ ├── Table
│ │ └── Table.jsx
│ └── Typography
│ ├── Danger.jsx
│ ├── Info.jsx
│ ├── Muted.jsx
│ ├── Primary.jsx
│ ├── Quote.jsx
│ ├── Rose.jsx
│ ├── Small.jsx
│ ├── Success.jsx
│ └── Warning.jsx
├── index.js
├── logo.svg
├── routes
│ └── index.jsx
└── views
├── AboutUsPage
│ ├── AboutUsPage.jsx
│ └── Sections
│ ├── SectionContact.jsx
│ ├── SectionDescription.jsx
│ ├── SectionOffice.jsx
│ ├── SectionServices.jsx
│ └── SectionTeam.jsx
├── BlogPostPage
│ ├── BlogPostPage.jsx
│ └── Sections
│ ├── SectionBlogInfo.jsx
│ ├── SectionComments.jsx
│ ├── SectionSimilarStories.jsx
│ └── SectionText.jsx
├── BlogPostsPage
│ ├── BlogPostsPage.jsx
│ └── Sections
│ ├── SectionImage.jsx
│ ├── SectionInterested.jsx
│ ├── SectionPills.jsx
│ └── SubscribeLine.jsx
├── ComponentsPage
│ ├── ComponentsPage.jsx
│ └── Sections
│ ├── SectionBasics.jsx
│ ├── SectionCards.jsx
│ ├── SectionCarousel.jsx
│ ├── SectionContentAreas.jsx
│ ├── SectionFooter.jsx
│ ├── SectionJavascript.jsx
│ ├── SectionNavbars.jsx
│ ├── SectionNotifications.jsx
│ ├── SectionPills.jsx
│ ├── SectionPreFooter.jsx
│ ├── SectionTabs.jsx
│ └── SectionTypography.jsx
├── ContactUsPage
│ └── ContactUsPage.jsx
├── EcommercePage
│ ├── EcommercePage.jsx
│ └── Sections
│ ├── SectionBlog.jsx
│ ├── SectionLatestOffers.jsx
│ └── SectionProducts.jsx
├── LandingPage
│ ├── LandingPage.jsx
│ └── Sections
│ ├── SectionProduct.jsx
│ ├── SectionTeam.jsx
│ └── SectionWork.jsx
├── LoginPage
│ └── LoginPage.jsx
├── PresentationPage
│ ├── PresentationPage.jsx
│ └── Sections
│ ├── SectionCards.jsx
│ ├── SectionComponents.jsx
│ ├── SectionContent.jsx
│ ├── SectionDescription.jsx
│ ├── SectionExamples.jsx
│ ├── SectionFreeDemo.jsx
│ ├── SectionOverview.jsx
│ ├── SectionPricing.jsx
│ └── SectionSections.jsx
├── PricingPage
│ ├── PricingPage.jsx
│ └── Sections
│ ├── SectionFeatures.jsx
│ └── SectionPricing.jsx
├── ProductPage
│ └── ProductPage.jsx
├── ProfilePage
│ └── ProfilePage.jsx
├── SectionsPage
│ ├── Sections
│ │ ├── SectionBlogs.jsx
│ │ ├── SectionContacts.jsx
│ │ ├── SectionFeatures.jsx
│ │ ├── SectionHeaders.jsx
│ │ ├── SectionPricing.jsx
│ │ ├── SectionProjects.jsx
│ │ ├── SectionTeams.jsx
│ │ └── SectionTestimonials.jsx
│ └── SectionsPage.jsx
├── ShoppingCartPage
│ └── ShoppingCartPage.jsx
└── SignupPage
└── SignupPage.jsx
At present, we officially aim to support the last two versions of the following browsers:
- Demo: https://demos.creative-tim.com/material-kit-pro-react/#/components
- Download Page: https://www.creative-tim.com/product/material-kit-pro-react
- Documentation: https://demos.creative-tim.com/material-kit-pro-react/#/documentation/tutorial
- License Agreement: https://www.creative-tim.com/license
- Support: https://www.creative-tim.com/contact-us
- Issues: Github Issues Page
- Material Kit Free React
- Material Kit Free
- Material Dashboard Free React
- Material Dashboard Pro React
- Material Dashboard Free HTML
- Material Dashboard Pro HTML
- Material Dashboard Free Angular
- Material Dashboard Pro Angular
We use GitHub Issues as the official bug tracker for the Material Kit 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 Kit 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 2018 Creative Tim (https://www.creative-tim.com/)
-
Creative Tim license
- More products from Creative Tim
- Tutorials
- Freebies from Creative Tim
- Affiliate Program (earn money)
Twitter: https://twitter.com/CreativeTim
Facebook: https://www.facebook.com/CreativeTim
Dribbble: https://dribbble.com/creativetim
Google+: https://plus.google.com/+CreativetimPage
Instagram: https://www.instagram.com/CreativeTimOfficial Edit a file, create a new file, and clone from Bitbucket in under 2 minutes
When you're done, you can delete the content in this README and update the file with details for others getting started with your repository.
We recommend that you open this README in another tab as you perform the tasks below. You can watch our video for a full demo of all the steps in this tutorial. Open the video in a new tab to avoid leaving Bitbucket.
You’ll start by editing this README file to learn how to edit a file in Bitbucket.
- Click Source on the left side.
- Click the README.md link from the list of files.
- Click the Edit button.
- Delete the following text: Delete this line to make a change to the README from Bitbucket.
- After making your change, click Commit and then Commit again in the dialog. The commit page will open and you’ll see the change you just made.
- Go back to the Source page.
Next, you’ll add a new file to this repository.
- Click the New file button at the top of the Source page.
- Give the file a filename of contributors.txt.
- Enter your name in the empty file space.
- Click Commit and then Commit again in the dialog.
- Go back to the Source page.
Before you move on, go ahead and explore the repository. You've already seen the Source page, but check out the Commits, Branches, and Settings pages.
Use these steps to clone from SourceTree, our client for using the repository command-line free. Cloning allows you to work on your files locally. If you don't yet have SourceTree, download and install first. If you prefer to clone from the command line, see Clone a repository.
- You’ll see the clone button under the Source heading. Click that button.
- Now click Check out in SourceTree. You may need to create a SourceTree account or log in.
- When you see the Clone New dialog in SourceTree, update the destination path and name if you’d like to and then click Clone.
- Open the directory you just created to see your repository’s files.
Now that you're more familiar with your Bitbucket repository, go ahead and add a new file locally. You can push your change back to Bitbucket with SourceTree, or you can add, commit, and push from the command line.
Badcoders suggestion for coding standard
please use produce for data mutation plesae do not write any logic . in function