React Responsive Pagination

An accessible responsive React pagination component which intelligently renders to the available width

Perfect for responsive dashboards, tables and any layout that resizes

✅ Automatically adapts to container width (no CSS breakpoints needed)
✅ Fully accessible with aria tags for screen readers
✅ React 16+ and SSR-friendly (Next.js, Remix and similar)
✅ Many styling options: Built-in themes, Tailwind, Custom CSS & Bootstrap

⚡️ LIVE DEMO - try it out for yourself! ⚡️

📕 Visit the docs to explore themes, styling options & props 🚀

⏳ Quick Start

npm install react-responsive-pagination

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 theme / css options

function MyApp() {
  const [currentPage, setCurrentPage] = useState(8);
  const totalPages = 20;

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

• current number: active page number
• total number: total number of pages
• onPageChange (page: number) => void: callback when new page selected
• ... many more props - see full props list

See styling options below for links to styling guides

🎨 Styling options

| Option | More Info | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | Built-in themes3 themes available, fine tune with css vars, light & dark modesIncluded Themes >     Themes Guide > | | | TailwindOptimised for Tailwind including plenty of examples and documentationTailwind Guide > | | | Custom CSSEasily use your own CSS with starter templates and full documentationCustom CSS Guide > | | | BootstrapSeamless Bootstrap 4 & 5 support including many optionsBootstrap Guide > |

🔋 Included Themes

As well as the styling options above, these three ready-to-go themes are available in the package - just import one of the css themes into your project as shown in the quickstart example above

import 'react-responsive-pagination/themes/classic-light-dark.css';

| Theme | Example | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | classic-light-dark.css | | | bootstrap-light-dark.css(Bootstrap not required) | | | minimal-light-dark.css | |

Themes also available as light only, please see the Themes guide for more details (including overridable theme attributes)

ℹ️ More Info

Visit the docs to explore themes, styling options & props