🚀 Next.js Pagination Plugin

A flexible and customizable pagination plugin built with Next.js, TypeScript, and Tailwind CSS. It supports various pagination styles, theming, API integration, keyboard navigation, and more.

✨ Features

• ✅ Basic Pagination – Simple previous/next navigation
• ✅ Pagination with Icons – Uses icons for navigation
• ✅ Pagination with Page Size – Select number of items per page
• ✅ Pagination with Page Input – Directly enter page number
• ✅ Keyboard Navigation – Navigate with arrow keys
• ✅ Dark Mode & Theming – Light/dark mode and color-blind accessibility
• ✅ API Pagination – Works with REST & GraphQL APIs
• ✅ Infinite Scroll – Load more items dynamically
• ✅ Pagination Persistence – Syncs state with URL & localStorage
• ✅ Lazy Loading & Skeleton UI – Optimized for performance

📦 Installation

Install the required dependencies:

npm install @headlessui/react clsx tailwindcss react-icons

Or with Yarn:

yarn add @headlessui/react clsx tailwindcss react-icons

🛠 Setup

1️⃣ Configure Tailwind CSS

If you haven't already:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

In globals.css, add:

@tailwind base;
@tailwind components;
@tailwind utilities;

2️⃣ Pagination Components

You have multiple components for different styles:

• Pagination.tsx
• PaginationWithIcons.tsx
• PaginationWithPageSize.tsx
• PaginationWithPageInput.tsx
• PaginationWithKeyboard.tsx
• PaginationWithTheming.tsx
• PaginationWithAPI.tsx
• InfinitePagination.tsx

Each is modular and showcases a unique pagination approach.

3️⃣ Tabs Component

Create a reusable components/Tabs.tsx:

import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import clsx from "clsx";

interface TabsProps {
  tabs: { label: string; content: React.ReactNode }[];
  activeTab: number;
  setActiveTab: (index: number) => void;
}

const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, setActiveTab }) => {
  return (
    <TabGroup selectedIndex={activeTab} onChange={setActiveTab}>
      <TabList className="flex space-x-2 border-b p-2">
        {tabs.map((tab, index) => (
          <Tab
            key={index}
            className={({ selected }) =>
              clsx(
                "px-4 py-2 rounded-t-md",
                selected ? "bg-blue-500 text-white font-bold" : "bg-gray-200 text-gray-700"
              )
            }
          >
            {tab.label}
          </Tab>
        ))}
      </TabList>
      <TabPanels className="p-4 border rounded-b-md">
        {tabs.map((tab, index) => (
          <TabPanel key={index}>{tab.content}</TabPanel>
        ))}
      </TabPanels>
    </TabGroup>
  );
};

export default Tabs;

4️⃣ Use Tabs in pages/index.tsx

import { useState } from "react";
import Tabs from "../components/Tabs";
import { getTabs } from "../components/tabsConfig";

export default function Home() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [darkMode, setDarkMode] = useState(false);
  const [colorBlindMode, setColorBlindMode] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [items, setItems] = useState<string[]>([]);
  const [activeTab, setActiveTab] = useState(0);
  const totalPages = 25;

  return (
    <div className="flex flex-col items-center min-h-screen p-8 pb-20 gap-10 sm:p-20 font-sans">
      <h1 className="text-2xl font-bold mb-4">Pagination Examples</h1>
      <Tabs
        tabs={getTabs({
          currentPage,
          setCurrentPage,
          pageSize,
          setPageSize,
          darkMode,
          setDarkMode,
          colorBlindMode,
          setColorBlindMode,
          items,
          isLoading,
          totalPages,
          activeTab,
          setActiveTab,
        })}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />
    </div>
  );
}

🎨 Theming & Customization

Use Tailwind classes to fully style components.

Example in PaginationWithTheming.tsx:

const themeClasses = darkMode
  ? "bg-gray-800 text-white"
  : "bg-gray-200 text-black";

🎹 Keyboard Shortcuts

• ⬅️ Arrow Left: Go to previous page

• ➡️ Arrow Right: Go to next page

• ⏎ Enter: Jump to a specific page

🛣 Roadmap

• ✅ Add more pagination styles

• ✅ Improve accessibility (ARIA support)

• ✅ GraphQL pagination support

• 🚀 Optimize performance