Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/mdbootstrap/react-invoice

Responsive React Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more. https://mdbootstrap.com/docs/standard/extended/invoice
https://github.com/mdbootstrap/react-invoice

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html invoice js react template

Last synced: 5 months ago
JSON representation

Responsive React Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more. https://mdbootstrap.com/docs/standard/extended/invoice

Awesome Lists containing this project

README 

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



# MDB React 5



Responsive React Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more.



Check out [React Invoice Documentation](https://mdbootstrap.com/docs/react/extended/invoice) for detailed instructions & even more examples.



## Basic example

![React Invoice Basic Example](https://user-images.githubusercontent.com/108793661/185054287-df193761-8ae5-4ae3-9278-265d900270bb.png)

```js

import React from "react";

import {

  MDBCard,

  MDBCardBody,

  MDBCol,

  MDBContainer,

  MDBRow,

  MDBTypography,

} from "mdb-react-ui-kit";



export default function App() {

  return (

    

      

        

          

            


              Thank for your purchase

            


            

              

                
  • John Doe
    • 

                    
  • 

                      Invoice #12345

                    
    • 

                    
  • April 17 2021
    • 

                  

                  
    

                  

                    
    Pro Package
    

                  

                  

                    
    $199.00
    

                  

                  
    

                

                

                  

                    
    Consulting
    

                  

                  

                    
    $100.00
    

                  

                  
    

                

                

                  

                    
    Support
    

                  

                  

                    
    $10.00
    

                  

                  
    

                

                

                  

                    
    Total: $10.00
    

                  

                  
    

                

                
    

                  

                    View in browser

                      

                  
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    

                
    

              

            

          

        

      );

    }

    ```
    


    ## 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 (click on the image to see a live demo)

    ### Company invoice:

    [![React Invoice #1](https://user-images.githubusercontent.com/108793661/185054568-9be5414c-25c2-4768-9099-492e4fbadb0d.png)](https://mdbootstrap.com/docs/react/extended/invoice#company-invoice)
    


    ### Company Invoice with logo:

    [![React Invoice #2](https://user-images.githubusercontent.com/108793661/185054749-0dff827e-8d6b-4a6b-ac92-ddbac6a77a85.png)](https://mdbootstrap.com/docs/react/extended/invoice#company-invoice)
    


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


    


    ## More extended React documentation