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.

Show code

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.

Invoice >> ID: #123-123

Print Export

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

Show code

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 &gt; &gt; <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:

Show code

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

Company Name

To: John Bootstrap
Street, City
State, Country
123-456-789

Invoice

ID:#123-456
Creation Date: Jun 23,2021
Status: Unpaid

Custom suit

Size:8.5

Color:Gray

$1500$1050

You save 25%

Add additional notes and payment information

SubTotal$1050
Shipping$15

Total Amount$1065

Show code

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 &gt; &gt; <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>
  );
}

Invoice

React Bootstrap 5 Invoice

Payment Receipt

Company invoice

Company Invoice with logo

Invoice

Invoice with product image

$1500$1050

Related resources