Invoice
React Bootstrap 5 Invoice
Responsive React Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more.
Payment Receipt
Basic payment receipt template created with Bootstrap. A billing receipt should be generated for a customer after the purchase. You can use any of the free templates on this page to create your own invoice or receipt generator.
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.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard>
<MDBCardBody className="mx-4">
<MDBContainer>
<p className="my-5 text-center" style={{ fontSize: "30px" }}>
Thank for your purchase
</p>
<MDBRow>
<MDBTypography listUnStyled>
<li className="text-black">John Doe</li>
<li className="text-muted mt-1">
<span className="text-black">Invoice</span> #12345
</li>
<li className="text-black mt-1">April 17 2021</li>
</MDBTypography>
<hr />
<MDBCol xl="10">
<p>Pro Package</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$199.00</p>
</MDBCol>
<hr />
</MDBRow>
<MDBRow>
<MDBCol xl="10">
<p>Consulting</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$100.00</p>
</MDBCol>
<hr />
</MDBRow>
<MDBRow>
<MDBCol xl="10">
<p>Support</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$10.00</p>
</MDBCol>
<hr style={{ border: "2px solid black" }} />
</MDBRow>
<MDBRow className="text-black">
<MDBCol xl="12">
<p className="float-end fw-bold">Total: $10.00</p>
</MDBCol>
<hr style={{ border: "2px solid black" }} />
</MDBRow>
<div className="text-center" style={{ marginTop: "90px" }}>
<a>
<u className="text-info">View in browser</u>
</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</MDBContainer>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}
Company invoice
A proper invoice should include detailed company information like address or VAT ID. You should remeber about getting this details from your customers on the stage of designing a payment form, to make generating invoices easier after the purchase.
The template below includes an option to printm, and a visible payment status indacted by the use of a badge.
MDBootstrap.com
- To: John Lorem
- Street, City
- State, Country
- 123-456-789
Invoice
- ID:#123-456
- Creation Date: Jun 23,2021
- Status: Unpaid
| # | Description | Qty | Unit Price | Amount |
|---|---|---|---|---|
| 1 | Pro Package | 4 | $200 | $800 |
| 2 | Web hosting | 1 | $10 | $10 |
| 3 | Consulting | 1 year | $300 | $300 |
Add additional notes and payment information
- SubTotal$1110
- Tax(15%)$111
Total Amount$1221
Thank you for your purchase
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBContainer,
MDBRow,
MDBCol,
MDBBtn,
MDBIcon,
MDBTypography,
MDBTable,
MDBTableHead,
MDBTableBody,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard className="p-4">
<MDBCardBody>
<MDBContainer className="mb-2 mt-3">
<MDBRow className="d-flex align-items-baseline">
<MDBCol xl="9">
<p style={{ color: "#7e8d9f", fontSize: "20px" }}>
Invoice > > <strong>ID: #123-123</strong>
</p>
</MDBCol>
<MDBCol xl="3" className="float-end">
<MDBBtn
color="light"
ripple="dark"
className="text-capitalize border-0"
>
<MDBIcon fas icon="print" color="primary" className="me-1" />
Print
</MDBBtn>
<MDBBtn
color="light"
ripple="dark"
className="text-capitalize border-0 ms-2"
>
<MDBIcon
far
icon="file-pdf"
color="danger"
className="me-1"
/>
Export
</MDBBtn>
<hr />
</MDBCol>
</MDBRow>
</MDBContainer>
<MDBContainer>
<MDBCol md="12" className="text-center">
<MDBIcon
fab
icon="mdb"
size="4x"
className="ms-0 "
style={{ color: "#5d9fc5" }}
/>
<p className="pt-0">MDBootstrap.com</p>
</MDBCol>
</MDBContainer>
<MDBRow>
<MDBCol xl="8">
<MDBTypography listUnStyled>
<li className="text-muted">
To: <span style={{ color: "#5d9fc5" }}>John Lorem</span>
</li>
<li className="text-muted">Street, City</li>
<li className="text-muted">State, Country</li>
<li className="text-muted">
<MDBIcon fas icon="phone-alt" /> 123-456-789
</li>
</MDBTypography>
</MDBCol>
<MDBCol xl="4">
<p className="text-muted">Invoice</p>
<MDBTypography listUnStyled>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#84B0CA" }} />
<span className="fw-bold ms-1">ID:</span>#123-456
</li>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#84B0CA" }} />
<span className="fw-bold ms-1">Creation Date: </span>Jun
23,2021
</li>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#84B0CA" }} />
<span className="fw-bold ms-1">Status:</span>
<span className="badge bg-warning text-black fw-bold ms-1">
Unpaid
</span>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
<MDBRow className="my-2 mx-1 justify-content-center">
<MDBTable striped borderless>
<MDBTableHead
className="text-white"
style={{ backgroundColor: "#84B0CA" }}
>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Unit Price</th>
<th scope="col">Amount</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope="row">1</th>
<td>Pro Package</td>
<td>4</td>
<td>$200</td>
<td>$800</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Web hosting</td>
<td>1</td>
<td>$10</td>
<td>$10</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Consulting</td>
<td>1 year</td>
<td>$300</td>
<td>$300</td>
</tr>
</MDBTableBody>
</MDBTable>
</MDBRow>
<MDBRow>
<MDBCol xl="8">
<p className="ms-3">
Add additional notes and payment information
</p>
</MDBCol>
<MDBCol xl="3">
<MDBTypography listUnStyled>
<li className="text-muted ms-3">
<span class="text-black me-4">SubTotal</span>$1110
</li>
<li className="text-muted ms-3 mt-2">
<span class="text-black me-4">Tax(15%)</span>$111
</li>
</MDBTypography>
<p className="text-black float-start">
<span className="text-black me-3"> Total Amount</span>
<span style={{ fontSize: "25px" }}>$1221</span>
</p>
</MDBCol>
</MDBRow>
<hr />
<MDBRow>
<MDBCol xl="10">
<p>Thank you for your purchase</p>
</MDBCol>
<MDBCol xl="2">
<MDBBtn
className="text-capitalize"
style={{ backgroundColor: "#60bdf3" }}
>
Pay Now
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}
Company Invoice with logo
Invoice with a company logo, a clear table and a place for a signature
- Company
- 123, Elm Street
- 123-456-789
- mail@mail.com
Invoice
123456789
| Description | Amount |
|---|---|
| Samsung TV | 500,00 |
| JBL Speaker | 300,00 |
| Macbook Air | 1000,00 |
| Iphone 11 PRO | 5000,00 |
- Total Amount: 6850,00
- Discount: 500,00
- Shippment: 500,00
Total: 6350,00
Date: 23 June 20221
Signature:
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCardHeader,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTable,
MDBTableBody,
MDBTableHead,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard>
<MDBCardHeader className="bg-dark"> </MDBCardHeader>
<MDBCardBody>
<MDBContainer>
<MDBRow>
<MDBCol xl="12">
<MDBIcon
far
icon="building"
color="danger"
size="6x"
className="float-start"
/>
<MDBTypography listUnStyled className="float-end">
<li style={{ fontSize: "30px", color: "red" }}>Company</li>
<li>123, Elm Street</li>
<li>123-456-789</li>
<li>mail@mail.com</li>
</MDBTypography>
</MDBCol>
</MDBRow>
<MDBRow className="text-center">
<h3
className="text-uppercase text-center mt-3"
style={{ fontSize: "40px" }}
>
Invoice
</h3>
<p>123456789</p>
</MDBRow>
<MDBRow className="mx-3">
<MDBTable>
<MDBTableHead>
<tr>
<th scope="col">Description</th>
<th scope="col">Amount</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<td>Samsung TV</td>
<td>
<MDBIcon fas icon="dollar-sign" /> 500,00
</td>
</tr>
<tr>
<td>JBL Speaker</td>
<td>
<MDBIcon fas icon="dollar-sign" /> 300,00
</td>
</tr>
<tr>
<td>Macbook Air</td>
<td>
<MDBIcon fas icon="dollar-sign" /> 1000,00
</td>
</tr>
<tr>
<td>Iphone 11 PRO</td>
<td>
<MDBIcon fas icon="dollar-sign" /> 5000,00
</td>
</tr>
</MDBTableBody>
</MDBTable>
</MDBRow>
<MDBRow>
<MDBCol xl="8">
<MDBTypography listUnStyled className="float-end me-0">
<li>
<span className="me-3 float-start">Total Amount:</span>
<MDBIcon fas icon="dollar-sign" /> 6850,00
</li>
<li>
<span className="me-5">Discount:</span>
<MDBIcon fas icon="dollar-sign" /> 500,00
</li>
<li>
<span
className="float-start"
style={{ marginRight: "35px" }}
>
Shippment:
</span>
<MDBIcon fas icon="dollar-sign" /> 500,00
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
<hr />
<MDBRow>
<MDBCol xl="8" style={{ marginLeft: "20px" }}>
<p
className="float-end"
style={{
fontSize: "30px",
color: "red",
fontWeight: "400",
fontFamily: "Arial, Helvetica, sans-serif",
}}
>
Total:
<span>
<MDBIcon fas icon="dollar-sign" className="ms-2" /> 6350,00
</span>
</p>
</MDBCol>
</MDBRow>
<MDBRow className="mt-2 mb-5">
<p className="fw-bold">
Date: <span className="text-muted">23 June 20221</span>
</p>
<p className="fw-bold mt-3">Signature:</p>
</MDBRow>
</MDBContainer>
</MDBCardBody>
<MDBCardFooter className="bg-dark"></MDBCardFooter>
</MDBCard>
</MDBContainer>
);
}
Invoice with product image
Invoice with a photo and a short product specification using a subtle product card. This example also highlights the discount applied on the order.
Invoice >> ID: #123-123
.webp)
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBContainer,
MDBRow,
MDBCol,
MDBBtn,
MDBIcon,
MDBTypography,
MDBTable,
MDBTableHead,
MDBTableBody,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard className="p-4">
<MDBCardBody>
<MDBContainer className="mb-2 mt-3">
<MDBRow className="d-flex align-items-baseline">
<MDBCol xl="9">
<p style={{ color: "#7e8d9f", fontSize: "20px" }}>
Invoice > > <strong>ID: #123-123</strong>
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
<MDBContainer>
<MDBCol md="12" className="text-center">
<MDBIcon
far
icon="building"
size="4x"
className="ms-0 "
style={{ color: "#8f8061" }}
/>
<p className="pt-2">Company Name</p>
</MDBCol>
</MDBContainer>
<MDBRow>
<MDBCol xl="8">
<MDBTypography listUnStyled>
<li className="text-muted">
To: <span style={{ color: "#8f8061" }}>John Bootstrap</span>
</li>
<li className="text-muted">Street, City</li>
<li className="text-muted">State, Country</li>
<li className="text-muted">
<MDBIcon fas icon="phone-alt" /> 123-456-789
</li>
</MDBTypography>
</MDBCol>
<MDBCol xl="4">
<p className="text-muted">Invoice</p>
<MDBTypography listUnStyled>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#8f8061" }} />
<span className="fw-bold ms-1">ID:</span>#123-456
</li>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#8f8061" }} />
<span className="fw-bold ms-1">Creation Date: </span>Jun
23,2021
</li>
<li className="text-muted">
<MDBIcon fas icon="circle" style={{ color: "#8f8061" }} />
<span className="fw-bold ms-1">Status:</span>
<span className="badge bg-warning text-black fw-bold ms-1">
Unpaid
</span>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
<MDBRow className="my-2 mx-1 justify-content-center">
<MDBCol md="3" className="mb-4 mb-md-0">
<div
className="bg-image ripple rounded-5 mb-4 overflow-hidden d-block"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/new/img(4).webp"
className="w-100"
height="90px"
alt="Elegant shoes and shirt"
/>
<a href="#!">
<div className="hover-overlay">
<div
className="mask"
style={{ backgroundColor: "hsla(0, 0%, 98.4%, 0.2)" }}
></div>
</div>
</a>
</div>
</MDBCol>
<MDBCol md="6" className="mb-4 mb-md-0">
<p className="fw-bold">Custom suit</p>
<p className="mb-1">
<span className="text-muted me-2">Size:</span>
<span>8.5</span>
</p>
<p>
<span className="text-muted me-2">Color:</span>
<span>Gray</span>
</p>
</MDBCol>
<MDBCol md="3" className="mb-4 mb-md-0">
<h5 className="mb-2">
<s className="text-muted me-2 small align-middle">$1500</s>
<span className="align-middle">$1050</span>
</h5>
<p className="text-danger">
<small>You save 25%</small>
</p>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol xl="8">
<p className="ms-3">
Add additional notes and payment information
</p>
</MDBCol>
<MDBCol xl="3">
<MDBTypography listUnStyled>
<li className="text-muted ms-3">
<span class="text-black me-4">SubTotal</span>$1050
</li>
<li className="text-muted ms-3 mt-2">
<span class="text-black me-4">Shipping</span>$15
</li>
</MDBTypography>
<p className="text-black float-start">
<span className="text-black me-3"> Total Amount</span>
<span style={{ fontSize: "25px" }}>$1065</span>
</p>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}