Customize the width of thumbnails

As we know, the thumbnail plugin provides the `Thumbnails` component to preview pages as thumbnails. All the thumbnails have the same width of `100px`. If you want to have smaller or bigger thumbnails, you can use the `thumbnailWidth` option which is available from 3.3.1.
The following sample code increases the width of thumbnails from `100px` to `150px`:
import { thumbnailPlugin } from '@react-pdf-viewer/thumbnail';
const thumbnailPluginInstance = thumbnailPlugin({
thumbnailWidth: 150,
const { Thumbnails } = thumbnailPluginInstance;
The option can be used with the default layout as well:
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
const defaultLayoutPluginInstance = defaultLayoutPlugin({
thumbnailPlugin: {
thumbnailWidth: 150,

See also