Components
Component Showcase
Available Components
Explore the available PDF template components with live examples and data structures.
Header Component
Displays company information with logo and contact details.
Live Example:
Offerte 1234567890 01.01.2025 David Salodinidavidesalodini@gmail.com +32 485 40 26 71 Frankrijklei 67  |
Data Structure:
export type HeaderData = {
name: string;
email: string;
phone: string;
address: string;
logo: string;
};Table Component
Renders structured data in a table format with headers, rows, and footer.
Live Example:
Items
These are the items that you have purchased
Data Structure:
export type Table = {
title: string;
description: string;
header: string[];
items: (string | number)[][];
footer: (string | number)[];
};Item Cards Component
Displays a list of items in a card format.
Live Example:
Item Cards
accumulation
- Tamarindo kd
- 21 x 145 mm
- Prijs per stuk
marathon
After coating myself in vegetable oil I found my success rate skyrocketed.
determine
Flying fish flew by the space station.
- SoortGladiolen
- Aantal60 stuks
- Prijs€10,00
trail
- SoortGladiolen
- Aantal60 stuks
Data Structure:
export type ItemCards = {
title: string;
items: {
title: string;
description: string;
}[];
};List Component
Displays structured information in a list format with multiple columns.
Live Example:
Specifications
Data Structure:
export type List = {
title: string;
description: string;
items: (string | number)[][];
};Images Component
Displays a gallery of images in a flexible layout. Combine one or more image Components to create a gallery.
Live Example:
Product Images
You'll see the rainbow bridge after it rains cats and dogs.
Data Structure:
// Props: { images: string[] }
// Example usage:
<Images images={["url1", "url2", "url3"]} />Highlight Text Component
Displays prominent text with two values, often used for totals or important information.
Live Example:
Data Structure:
export type HighlightText = {
text1: string;
text2: string;
};