-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 72cf6d2
Showing
4 changed files
with
40,110 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
|  | ||
|
|
||
| # MDB React 5 | ||
|
|
||
| ### React 17 & Bootstrap 5 & Material Design 2.0 UI KIT | ||
|
|
||
| **[>> Get Started in 4 steps](https://mdbootstrap.com/docs/b5/react/getting-started/installation/)** | ||
|
|
||
| **[>> MDBReact 5 Demo](https://mdbootstrap.com/docs/b5/react#demo)** | ||
|
|
||
| <a href="https://npmcharts.com/compare/mdb-react-ui-kit?minimal=true"> <img src="https://img.shields.io/npm/dw/mdb-react-ui-kit" alt="Downloads"></a> | ||
| <a href="https://github.com/mdbootstrap/mdb-react-ui-kit/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> | ||
| <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a> | ||
| <a href="https://www.youtube.com/watch?v=c9B4TPnak1A&t=6s"><img alt="YouTube Video Views" src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a> | ||
|
|
||
| --- | ||
|
|
||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <a href="https://mdbootstrap.com/docs/b5/react/" alt="Bootstrap 5" rel="dofollow"> | ||
| <img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/about/assets/mdb5-about.jpg"> | ||
| </a> | ||
| </td> | ||
| <td> | ||
| <ul> | ||
| <li><b>500+ material UI components</b></li> | ||
| <li>Super simple, 1 minute installation</li> | ||
| <li>Detailed docs & multiple practical examples</li> | ||
| <li>React 17</li> | ||
| <li>Huge and active community</li> | ||
| <li><b>MIT license - free for personal & commercial use</b></li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| Trusted by <b>2 000 000+</b> developers & designers. Used by companies like | ||
|
|
||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/nike.png" style="width: 10px;"></td> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/amazon.png" style="width: 10px;"></td> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/sony.png" style="width: 10px;"></td> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/samsung.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/airbus.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/yahoo.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/deloitte.png" style="height: 40px"></div> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/ge.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/kpmg.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/unity.png" style="height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/ikea.png" style="max-height: 40px"> | ||
| <td><img src="https://mdbootstrap.com/img/logo/brands/aegon.png" style="height: 40px"> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| --- | ||
|
|
||
| ###### Tutorial for the latest Bootstrap v.5 Alpha. In this video we'll learn about the changes implemented into v.5. | ||
|
|
||
| **[>> Click here for a written tutorial](https://mdbootstrap.com/docs/b5/react/getting-started/quick-start/)** | ||
|
|
||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td align="center"> | ||
| <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png"> | ||
| </a> | ||
| </td> | ||
| <td> | ||
| <a href="https://mdbootstrap.com/docs/b5/react/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow"> | ||
| <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/cover-bootstrap-5-1.png"> | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center"> | ||
| <p align="center"><b>Start to Code</b></p> | ||
| <a href="https://mdbootstrap.com/docs/b5/react/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow"> | ||
| <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png"> | ||
| </a> | ||
| </td> | ||
| <td align="center"> | ||
| <p align="center"><b>Learn Bootstrap 5 | Crash Course for Beginners in 1.5H</b></p> | ||
| <a href="https://mdbootstrap.com/docs/b5/react/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow"> | ||
| <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png"> | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| --- | ||
|
|
||
| # Demo | ||
|
|
||
| #### Simplicity and ease of use are key features of MDBReact 5 UI Kit. You need only one minute to install and run it. | ||
|
|
||
| ### Buttons | ||
|
|
||
| <p>Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/buttons/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons.gif"> | ||
| </p> | ||
| </a> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/buttons/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-social-buttons.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/buttons/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons2.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/buttons/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons-outline.gif"> | ||
| </p> | ||
| </a> | ||
|
|
||
| ### Spinners | ||
|
|
||
| <p>Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/spinners/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif"> | ||
| </p> | ||
| </a> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/spinners/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif"> | ||
| </p> | ||
| </a> | ||
|
|
||
| ### Cards | ||
|
|
||
| <p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/components/cards/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-cards.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| ### Footer | ||
|
|
||
| <p>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/navigation/footer/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| ### Hover | ||
|
|
||
| <p>MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-hover.gif"> | ||
| </p> | ||
| </a> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-hover2.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| ### Notes | ||
|
|
||
| <p>Notes are small components very helpful in inserting an additional piece of information.</p> | ||
|
|
||
| <a href="https://mdbootstrap.com/docs/b5/react/content-styles/typography/" alt="Bootstrap 5" rel="dofollow"> | ||
| <p align="center"> | ||
| <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-alerts.png"> | ||
| </p> | ||
| </a> | ||
|
|
||
| </table> | ||
|
|
||
| and more. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| MDB 5 React | ||
|
|
||
| Version: FREE 1.3.0 | ||
|
|
||
| Documentation: | ||
| https://mdbootstrap.com/docs/b5/react/ | ||
|
|
||
| Installation: | ||
| https://mdbootstrap.com/docs/b5/react/getting-started/installation/ | ||
|
|
||
| CLI & hosting: | ||
| https://mdbootstrap.com/docs/standard/cli/ | ||
|
|
||
| Support: | ||
| https://mdbootstrap.com/support/cat/react/ |
Oops, something went wrong.