PDF Viewer Components for React & Next.js

Trusted by developers from companies in 7 industries and across 23 countries

Highlight

Full-Featured PDF Viewer Component

Make your PDF handling look like it’s meant to be there. Here’s what our component brings to your React projects

Fundamental React PDF Features

Get started with essential PDF viewer functions out of the box. React PDF Kit provides all basic tools you need to render, navigate and interact with.

Render and scroll PDF

Pinch to zoom

Localization

Accessibility Support

Default Toolbar (search, print, zoom and more)

Support PDF Layers (Text, Canvas, Annotation, AcroForm and more)

React PDF Kit fundamental viewer features including rendering, scrolling, pinch-to-zoom, accessibility support, default toolbar, and PDF layer support

Customizable Style & Toolbar

Build the exact interface you need. Add custom components to toolbars and sidebars, or create entirely custom control panels that fit your workflow.

Set default light/dark mode

Adjust CSS variables to your branding

Modify React PDF Viewer components

Change or create custom localization

Mix and match toolbar components

Create your own toolbar

React PDF Kit customizable style and toolbar showing light and dark mode, CSS branding variables, toolbar customization, and component mixing

Extensible with Built-in React Context API

Integrate PDF functionality anywhere in your app with our comprehensive API. Control search, highlight, viewer events and more programmatically

Add custom buttons externally

Create your own toolbar

Restrict usage with Context APIs

Combine to create a custom function

Manipulate PDF programmatically

React PDF Kit extensible viewer with built-in Context API for custom buttons, toolbar creation, usage restrictions, and programmatic PDF manipulation

Fit With Your Stack. No Config Headaches

Drop React PDF Kit into any modern React setup with ease. Tested across frameworks, bundlers, and UI libraries so you can focus on your project.

Compatible with modern React frameworks such as Next.js, Gatsby, Remix, Docusaurus and more

Zero conflicts with your UI library like MUI, Chakra UI, Tailwind CSS, shadcn/ui, Ant Design, Radix UI and more

First-class Next.js support, including App Router and Pages Router

Simple bundler setup with Vite, Webpack, and Turbopack

React PDF Kit compatibility with React frameworks and UI libraries including Next.js, Gatsby, Remix, Docusaurus, MUI, Chakra UI, Tailwind CSS, shadcn/ui, Ant Design, Radix UI, and bundlers like Vite, Webpack, and Turbopack.

High Performance React PDF Viewer

Handle large documents without the lag. Optimized rendering ensures smooth scrolling and fast loading, even with multi-hundred page files.

Virtual Scroll

Lazy Loading

Continuous performance improvement

Responsive & Mobile-Optimized

Work across all devices and screen sizes. Your PDFs look professional whether users are on desktop, tablet, or mobile.

Default mobile responsive layout

Adjustable responsive trigger point

Explore 20+ Features

Built for Long-Term Use

We're developers who've struggled with PDF integration too. That's why we built React PDF Kit to be flexible, reliable, and actually enjoyable to work with.

Flexible

Work with TypeScript or JavaScript. Drop it in existing projects or start fresh with easy configuration.

Production-Ready

Battle-tested. Includes starter templates for React, Next.js, Gatsby and more so you can ship faster.

Browser Compatible

Consistent performance across major browsers: Chrome, Firefox, Edge, Safari, and Opera.

Developer Friendly Doc

Clear structure, detailed usage guides and examples for easy copy-paste code snippets.

Continuous Updates

Regular updates with new features and enhancements to keep the component current.

Dedicated Support

Your feedback is important to us. Get timely technical support for your use cases.

React PDF Kit installation section background

Get Full React PDF Integration In Minutes

Use with your favorite React framework, whether you're using Next.js, Gatsby, or just React. React PDF Kit will fit right in.

src/App.jsx

import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
} from "@react-pdf-kit/viewer";

function App() {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">         
         <RPLayout toolbar>
            <RPPages />
         </RPLayout>
      </RPProvider>
    </RPConfig>
  );
}
export default App;