Convert React components with Tailwind CSS and Shadcn UI to PDF using React-PDF
npm install tw-to-react-pdfA library that converts React components styled with Tailwind CSS and Shadcn UI into PDFs using React-PDF.
``bash`
npm install tailwind-to-reactpdf
jsx
import React from 'react';
import { TailwindToPDFViewer, TailwindToPDFDownloadLink } from 'tailwind-to-reactpdf';const MyPDFComponent = () => {
return (
{/ PDF Viewer /}
My PDF Document
This content will be rendered as a PDF with Tailwind styles.
{/ Download Link /}
label={}
filename="my-document.pdf"
>
Downloadable PDF
Click the button to download this content as a PDF.
);
};
`
$3
You can provide custom style mappings for Tailwind classes:`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';const MyComponent = () => {
const customStyleMap = {
'my-custom-class': { color: 'purple', fontSize: 24 },
'brand-button': { backgroundColor: '#FF5733', padding: 10, borderRadius: 5 }
};
return (
Custom Styled Heading
);
};
`$3
You can provide custom components to be used in the PDF rendering:`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';
import { Text, View } from '@react-pdf/renderer';const MyComponent = () => {
const customComponents = {
'CustomHeading': ({ children, style }) => (
{children}
),
'CustomCard': ({ children, style }) => (
{children}
)
};
return (
Custom Component Heading
Content inside a custom card component
);
};
`$3
The library includes built-in support for common Shadcn UI components:`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';
import { Button, Card, Input } from 'tailwind-to-reactpdf/components';const MyComponent = () => {
return (
Shadcn Card
This is a card component from Shadcn UI.
);
};
``Props:
- children : React nodes to be converted to PDF
- includeDefaultStyles : Boolean to include default Tailwind style mappings (default: true)
- customStyleMap : Object with custom Tailwind class to React-PDF style mappings
- customComponents : Object with custom component mappings
Props:
- children : React nodes to be converted to PDF
- label : React node to be rendered as the download link
- filename : String for the downloaded file name (default: 'document.pdf')
- includeDefaultStyles : Boolean to include default Tailwind style mappings (default: true)
- customStyleMap : Object with custom Tailwind class to React-PDF style mappings
- customComponents : Object with custom component mappings