Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-product-cards

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. https://mdbootstrap.com/docs/react/extended/product-cards
https://github.com/mdbootstrap/react-product-cards

bootstrap bootstrap-template bootstrap-theme bootstrap5 cards css html js product product-cards react

Last synced: 11 months ago
JSON representation

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. https://mdbootstrap.com/docs/react/extended/product-cards

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



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 (

    

      

        

          

            

            

            

              


                Believing is seeing

                
Apple pro display XDR


              


              


                


                  Pro Display XDR

                  $5,999

                


                


                  Pro stand

                  $999

                


                


                  Vesa Mount Adapter

                  $199

                


              


              


                Total

                $7,197.00

              


            

          

        

      

    

  );

}



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).






## More extended React documentation