Minimal Numbered Pagination

paginations

Clean numbered pagination with active state pill, step arrows, and entry summary.

#pagination#minimal#numbers#navigation

Live Interactive Preview

Page 3 of 10

Component Source Code

Select language in the dropdown

MinimalPagination.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ChevronLeft, ChevronRight } from 'lucide-react';
5
6export default function MinimalPagination() {
7  const [currentPage, setCurrentPage] = useState(3);
8  const totalPages = 10;
9
10  const handlePrev = () => setCurrentPage((p) => Math.max(1, p - 1));
11  const handleNext = () => setCurrentPage((p) => Math.min(totalPages, p + 1));
12
13  return (
14    <div className="w-full max-w-md rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 sm:p-5 shadow-lg flex flex-col sm:flex-row items-center justify-between gap-4 transition-colors">
15      <span className="text-xs text-slate-500 dark:text-slate-400 font-medium">
16        Page <span className="font-bold text-slate-900 dark:text-slate-100">{currentPage}</span> of {totalPages}
17      </span>
18
19      <div className="flex items-center gap-1.5">
20        <button
21          onClick={handlePrev}
22          disabled={currentPage === 1}
23          className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-40 transition"
24          aria-label="Previous Page"
25        >
26          <ChevronLeft className="h-4 w-4" />
27        </button>
28
29        {[1, 2, 3, 4, 5].map((page) => (
30          <button
31            key={page}
32            onClick={() => setCurrentPage(page)}
33            className={`flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold transition ${
34              currentPage === page
35                ? 'bg-blue-600 text-white shadow-xs'
36                : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
37            }`}
38          >
39            {page}
40          </button>
41        ))}
42
43        <button
44          onClick={handleNext}
45          disabled={currentPage === totalPages}
46          className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-40 transition"
47          aria-label="Next Page"
48        >
49          <ChevronRight className="h-4 w-4" />
50        </button>
51      </div>
52    </div>
53  );
54}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/paginations/MinimalPagination.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import MinimalNumberedPagination from '@/components/paginations/MinimalPagination';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <MinimalNumberedPagination />
7    </main>
8  );
9}