Themes

react-responsive-pagination is an easy to use React responsive pagination component which always outputs the right number of pagination elements for the width available, no guesswork needed

react-responsive-pagination comes with a number of ready-to-go pre-styled themes, each theme is a pre-built configurable css stylesheet, ready to be included in a front-end project - see below for the list of available themes. All themes support overridable attributes, see Configuring a theme for more details

See below for available themes

Installation

Install react-responsive-pagination from npm:

npm install react-responsive-pagination

Theme quick start

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:

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


import 'react-responsive-pagination/themes/classic.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

Theme import:
import 'react-responsive-pagination/themes/classic.css';

Overiddable variables:
See common overridable variables below or see the theme css source for the full list (with default values)

2. Bootstrap theme (without Bootstrap)

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

Theme import:
import 'react-responsive-pagination/themes/bootstrap.css';

Notes:
See additional Bootstrap options

Overiddable variables:
See common overridable variables below or see the theme css source for the full list (with default values)

3. Minimal theme

Theme import:
import 'react-responsive-pagination/themes/minimal.css';

Overiddable variables:
See common overridable variables below or see the theme css source for the full list (with default values)

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: #0d6efd;
  --pagination-hover-color: #0a58ca;
  /* etc */
}

See Common overridable variables below and also see the respective theme source 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)

VariableDescription
--pagination-font-familyMain font
--pagination-font-weightMain font weight, see mdn font-weight for options
--pagination-font-sizeFont size
--pagination-colorText colour
--pagination-bgBackground colour
--pagination-hover-colorText colour when hovering
--pagination-hover-bgBackground colour when hovering
--pagination-active-colorText colour of active item
--pagination-active-bgBackground colour of active item
--pagination-disabled-colorText colour of disabled items
--pagination-disabled-bgBackground colour of disabled items
--pagination-margin-topTop margin of pagination component
--pagination-margin-bottomBottom margin of pagination component

Also please see each theme source files for a full list of variables supported by that theme (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