Glass Floating Pill Pagination

paginations

Floating pill-style glassmorphic pagination bar with backdrop blur.

#pagination#glass#floating#pill

Live Interactive Preview

...

Component Source Code

Select language in the dropdown

GlassFloatingPagination.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ArrowLeft, ArrowRight } from 'lucide-react';
5
6export default function GlassFloatingPagination() {
7  const [page, setPage] = useState(2);
8  const total = 8;
9
10  return (
11    <div className="inline-flex items-center gap-3 rounded-full border border-slate-200/80 dark:border-slate-800/80 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl px-4 py-2 shadow-xl transition-all">
12      <button
13        onClick={() => setPage((p) => Math.max(1, p - 1))}
14        disabled={page === 1}
15        className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 disabled:opacity-30 transition"
16        aria-label="Previous Page"
17      >
18        <ArrowLeft className="h-3.5 w-3.5" />
19      </button>
20
21      <div className="flex items-center gap-1 text-xs font-semibold text-slate-700 dark:text-slate-300">
22        {[1, 2, 3, 4].map((n) => (
23          <button
24            key={n}
25            onClick={() => setPage(n)}
26            className={`flex h-7 w-7 items-center justify-center rounded-full transition-all ${
27              page === n
28                ? 'bg-blue-600 text-white shadow-md font-bold'
29                : 'hover:bg-slate-200/60 dark:hover:bg-slate-800'
30            }`}
31          >
32            {n}
33          </button>
34        ))}
35        <span className="px-1 text-slate-400">...</span>
36        <button
37          onClick={() => setPage(total)}
38          className={`flex h-7 w-7 items-center justify-center rounded-full transition-all ${
39            page === total
40              ? 'bg-blue-600 text-white shadow-md font-bold'
41              : 'hover:bg-slate-200/60 dark:hover:bg-slate-800'
42          }`}
43        >
44          {total}
45        </button>
46      </div>
47
48      <button
49        onClick={() => setPage((p) => Math.min(total, p + 1))}
50        disabled={page === total}
51        className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 disabled:opacity-30 transition"
52        aria-label="Next Page"
53      >
54        <ArrowRight className="h-3.5 w-3.5" />
55      </button>
56    </div>
57  );
58}

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/GlassFloatingPagination.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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