Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@iprzybysz
iprzybysz committed Aug 8, 2022
1 parent 6b655f0 commit d41776a
Showing 1 changed file with 120 additions and 191 deletions.
311 changes: 120 additions & 191 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,194 +2,123 @@

# 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.
Responsive React Product Cards built with the latest Bootstrap 5. Card grid usage, eCommerce product cards, product card listing deck, card with reviews and more.

Check out [React Product Cards Documentation](https://mdbootstrap.com/docs/react/extended/product-cards) for detailed instructions & even more examples.

## Basic example
![React Product Cards Basic Example](https://user-images.githubusercontent.com/108793661/183390481-eb012990-fb20-43d6-9136-cb9f778c15d0.png)
```js
import React from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCardTitle,
MDBIcon,
} from "mdb-react-ui-kit";

function App() {
return (
<MDBContainer fluid className="my-5">
<MDBRow className="justify-content-center">
<MDBCol md="6">
<MDBCard className="text-black">
<MDBIcon fab icon="apple" size="lg" className="px-3 pt-3 pb-2" />
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/3.webp"
position="top"
alt="Apple Computer"
/>
<MDBCardBody>
<div className="text-center">
<MDBCardTitle>Believing is seeing</MDBCardTitle>
<p className="text-muted mb-4">Apple pro display XDR</p>
</div>
<div>
<div className="d-flex justify-content-between">
<span>Pro Display XDR</span>
<span>$5,999</span>
</div>
<div className="d-flex justify-content-between">
<span>Pro stand</span>
<span>$999</span>
</div>
<div className="d-flex justify-content-between">
<span>Vesa Mount Adapter</span>
<span>$199</span>
</div>
</div>
<div className="d-flex justify-content-between total font-weight-bold mt-4">
<span>Total</span>
<span>$7,197.00</span>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}

export default App;
```
```css
body {
background-color: #eee;
}
```

## How to use?

1. Download MDB 5 - free REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples
### Product comparison template:
[![React Product Cards #1](https://user-images.githubusercontent.com/108793661/183390914-bc47081f-e675-4e41-b947-00423eb1893f.png)](https://mdbootstrap.com/docs/react/extended/product-cards#section-2)
### Ecommerce category product list page:
[![React Product Cards #2](https://user-images.githubusercontent.com/108793661/183391130-b8746bf9-6f0b-4914-87a3-1419d5b60fa3.png)](https://mdbootstrap.com/docs/react/extended/product-cards#section-3)
### Ecommerce product listing:
[![React Product Cards #3](https://user-images.githubusercontent.com/108793661/183391319-788cae83-cc30-45e6-abd9-4a8660f3b378.png)](https://mdbootstrap.com/docs/react/extended/product-cards#section-4)

You can find other examples [here](https://mdbootstrap.com/docs/react/extended/product-cards).

<hr>

## More extended React documentation
<ul>
<li><a href="https://mdbootstrap.com/docs/react/extended/code/">React Bootstrap Code</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/gallery/">React Bootstrap Gallery</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/hamburger-menu/">React Bootstrap Hamburger Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/jumbotron/">React Bootstrap Jumbotron</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/maps/">React Bootstrap Maps</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/mega-menu//">React Bootstrap Mega Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/media-object/">React Bootstrap Media object</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/multiselect/">React Bootstrap Multiselect</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/masonry/">React Bootstrap Masonry</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/contact/">React Bootstrap Contact form</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/gradients/">React Bootstrap Gradients</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/pagination/">React Bootstrap Pagination</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/panels/">React Bootstrap Panels</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/social-media/">React Bootstrap Social Media icons & buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/search/">React Bootstrap Search</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-sort/">React Bootstrap Table sort</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-responsive/">React Bootstrap Table responsive</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-scroll/">React Bootstrap Table scroll</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-search/">React Bootstrap Table search</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/textarea/">React Bootstrap Textarea</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/sidebar/">React Bootstrap Sidebar</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/profiles/">React Bootstrap Profiles</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/">React Bootstrap Nested Dropdown</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/">React Bootstrap Address Form</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/back-to-top">React Scroll Back to Top button</a></li>
</ul>

0 comments on commit d41776a

Please sign in to comment.