xiry.

Development · Website

Midday React PDF Invoice Template

Open-source React PDF template and Next.js route for rendering invoices

From the Xiry library · Updated 10 October 2026

Visit midday.ai ↗

An open-source invoice template built on @react-pdf/renderer from Midday. It renders customizable, cleanly designed PDF invoices using Geist Mono typography, Tiptap rich-text integration, and dynamic QR codes without requiring external rendering APIs.

What it's for

  • Generate PDF invoices programmatically inside a Next.js or Node.js web application
  • Preview generated invoices directly in the browser using dynamic route queries
  • Render rich-text invoice notes and customer details stored in Tiptap JSON format

Features

  • Built on @react-pdf/renderer for client-side and server-side PDF generation
  • Custom typography support configured with Vercel's Geist Mono font
  • Embedded QR codes pointing directly to live web invoices
  • Flexible page sizing supporting both standard A4 and US Letter formats
  • Modular component layout for line items, summaries, payment details, and logos
  • Next.js Route Handler pattern for streaming PDF responses directly

Pricing

Open source. Free and open source

Details

Type
Website
Category
Development
Topic
UI Components
Open source
Yes
Platforms
Code library, Web
For
React and Next.js developers building custom billing or invoicing features
Alternative to
Puppeteer, DocRaptor, PDFShift
Tags
react pdf, invoicing, nextjs, typescript, templates

Why it was saved

  • @pontusab, 18 August 2025: A real, production-grade open-source React PDF invoice component with a documented set of features (Tiptap-based dynamic content, Geist font, A4/letter support, QR code linking to web invoice). Directly reusable for anyone building PDF generation into a web app.

Compare

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated