Themes

react-responsive-pagination includes several pre-styled themes ‘out of the box’

Want to create your own css? See the Custom Styles guide

More info on the individual themes below

Theme quick start

First add the react-responsive-pagination package to your project:

npm install react-responsive-pagination

Using a theme is simple, just include the theme css file somewhere in your project (usually a root page or maybe the file where the global css file is being included).

For example, using the Classic theme:

import React, { useState } from 'react';
import ResponsivePagination from 'react-responsive-pagination';

import 'react-responsive-pagination/themes/classic-light-dark.css';
// ^ classic theme, see below for other themes
// include this once in the project (preferrably the main index.js)

export default function MyApp() {
  const totalPages = 120;
  const [currentPage, setCurrentPage] = useState(1);

  function handlePageChange(page) {
    setCurrentPage(page);
    // ... do something with \`page\`
  }

  return (
    <ResponsivePagination
      total={totalPages}
      current={currentPage}
      onPageChange={page => handlePageChange(page)}
    />
  );
}

(see Configuring a theme for details on overriding theme attributes, also please see Props Reference for more information on Props)

1. Classic theme

2. Bootstrap theme (without Bootstrap)

Bootstrap 5 styled pagination. Standalone styles, no need to install the full Bootstrap library

3. Minimal theme

Configuring a theme (optional)

All themes are ready-to-go but various attributes can be overridden (if required)

To override an attribute: add a root selector to the project’s global stylesheet (create a global stylesheet if necessary) and then define one or more css variables in the root selector:

:root {
  --pagination-color-light: #0d6efd;
  --pagination-hover-color-light: #0a58ca;
  /* etc */
}

See Common overridable variables below and also see the respective theme documentation files (linked above) for a full list of supported variables

Common overridable variables

(see the Configuring a theme section above for details on overriding theme attributes)

Also please see the theme documentation files for a full list of variables supported by that theme (theme documentation files linked above in the respective theme section)

Need custom css?

Users looking to fully customise the component’s appearance can create a new set of styles within their project (optionally using these themes as a starting point).

For inspiration, please see the theme files at: https://github.com/jonelantha/react-responsive-pagination/tree/main/packages/react-responsive-pagination/themes and please also see the custom styles guide