How to customize
Choose the right way to change how the viewer looks and behaves, from a CSS variable to a completely custom interface.
React PDF Viewer is customized in layers. Start with the lightest mechanism that achieves your goal; each step down gives more control and more responsibility.
Ways to customize
| You want to… | Use | Where |
|---|---|---|
| Match your brand colors, radius, spacing and fonts | CSS variables | Theming |
| Support dark mode | rpv-theme-dark or rpv-theme-auto classes | Theming |
| Style a state, such as loading or fullscreen | data-* attributes on the root | Theming |
| Change or translate texts and accessible names | labels and locale | Labels and locale |
| Choose, place or hide toolbar controls | toolbar config | Toolbar |
| Replace the loading, empty, error or password views | render* props | Overriding structure |
| Replace the toolbar, or mix it with your own buttons | renderToolbar and PdfToolbar | Custom toolbar |
| Build a completely different interface | usePdfDocument and PdfPageCanvas | Headless |
How the styles are built
The stylesheet is plain CSS in a cascade layer named rpv, with every class prefixed rpv-. Because it is layered, any unlayered CSS in your app wins without !important. Every color and size reads a CSS variable with a fallback, so setting a variable on the viewer or on any ancestor changes it.
.reports {
--rpv-toolbar-bg: #1f2937;
--rpv-accent: #7c3aed;
}