Go to homepage

Projects /


A minimal invoice template.

View Demo

How to

The invoice component can be integrated into any e-commerce to allow the users to display and download a receipt of their purchase. It could also be used by freelancers and agencies as an alternative to PDF invoices.

It includes a 'print' button to convert the invoice into a printable version.

In CSS, we use the print @media rule to apply some style only if the page is printed. You can use it to hide page elements that are not required when printing the invoice (e.g., the main header and footer).

@media not print {
  /* style applied if the page is not printed */
  .invoice {
    overflow: hidden;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    min-width: 800px;

  /* ... */

@media print {
  /* hide the print button */
  .invoice-btn-wrapper {
    display: none;

  /* ... */


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.