pdf-carousel

Docsend/Forbes-style PDF slider carousel for Next.js.

Install

npm i pdf-carousel

Usage (Next.js Pages or App Router)

The component is "use client" — import it from a client page or wrapper.

App Router (app/):

"use client";

import { PDFCarousel } from "pdf-carousel";

Pages Router (pages/):

import dynamic from "next/dynamic";

const PDFCarousel = dynamic(() => import("pdf-carousel").then((m) => m.PDFCarousel), {
  ssr: false,
});

export default function Page() {
  return (
    <PDFCarousel
      src="https://your-s3-bucket.com/media-kits/forbes-media-kit.pdf"
      logoSrc="/logo.png"
      copyrightText="© 2026 Forbes Media"
      backgroundColor="#0b0b0b"
      headerBackground="#111827"
      headerTextColor="#ffffff"
      footerBackground="#111827"
      footerTextColor="#ffffff"
      initialPage={1}
      zoomStep={0.25}
      recentIssues={[
        { label: "Jan 2026", href: "https://example.com/jan-2026" },
        { label: "Dec 2025", href: "https://example.com/dec-2025" },
      ]}
    />
  );
}

Props

PDFCarousel props:

• src (string, required): Absolute URL to the PDF (S3, CDN, etc.)
• initialPage (number, optional, default: 1): Starting page number (1-based)
• zoomStep (number, optional, default: 0.25): Increment for zoom-in
• logoSrc (string, optional): Header logo image URL
• logoAlt (string, optional, default: "Logo"): Header logo alt text
• copyrightText (string, optional): Footer copyright text
• recentIssues (array, optional): Header links to other publications. Each item: { label: string; href: string }. Links open in a new tab.
• backgroundColor (string, optional, default: "#0b0b0b"): Viewer background
• headerBackground (string, optional, default: "#111827"): Header background color
• headerTextColor (string, optional, default: "#ffffff"): Header text color
• footerBackground (string, optional, default: "#111827"): Footer background color
• footerTextColor (string, optional, default: "#ffffff"): Footer text color
• pdfWorkerSrc (string, optional): Override pdf.js worker URL
• className / style (optional): Wrapper styles

Controls

The viewer includes:

• Previous/Next page buttons
• Jump-to-page input
• Download, Print, Zoom In, Fullscreen
• Copy Link button

Share behavior

When you click Copy Link, the component copies the current page URL (window.location.href) as an absolute URL so it can be pasted directly into a browser.

Loading behavior

The viewer opens as soon as the first page is ready (instead of waiting for every page). Remaining pages render in order in the background, then thumbnails load after all page images are ready. If you navigate to a page that is not ready yet, a per-page loading state is shown.

Notes

Works with Next.js Pages Router and App Router. PDF.js is bundled inside the package (no react-pdf / next/navigation dependencies).

Pages Router troubleshooting

Use dynamic(..., { ssr: false }) as shown above. If you still see PDF.js/webpack errors, add to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['pdf-carousel'],
};

module.exports = nextConfig;