Neo-Brutalist Block Pagination

paginations

High-contrast neo-brutalist pagination with hard shadow offset and thick borders.

#pagination#brutalist#bold#retro

Live Interactive Preview

Component Source Code

Select language in the dropdown

BrutalistPagination.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ArrowLeft, ArrowRight } from 'lucide-react';
5
6export default function BrutalistPagination() {
7  const [page, setPage] = useState(2);
8  const total = 5;
9
10  return (
11    <div className="flex items-center gap-2 font-mono">
12      <button
13        onClick={() => setPage((p) => Math.max(1, p - 1))}
14        disabled={page === 1}
15        className="flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-black shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 disabled:opacity-40 transition"
16        aria-label="Previous Page"
17      >
18        <ArrowLeft className="h-4 w-4" />
19      </button>
20
21      {[1, 2, 3, 4, 5].map((p) => (
22        <button
23          key={p}
24          onClick={() => setPage(p)}
25          className={`flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 font-black text-sm transition-all ${
26            page === p
27              ? 'bg-amber-300 dark:bg-amber-400 text-slate-900 shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff]'
28              : 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5'
29          }`}
30        >
31          {p}
32        </button>
33      ))}
34
35      <button
36        onClick={() => setPage((p) => Math.min(total, p + 1))}
37        disabled={page === total}
38        className="flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-black shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 disabled:opacity-40 transition"
39        aria-label="Next Page"
40      >
41        <ArrowRight className="h-4 w-4" />
42      </button>
43    </div>
44  );
45}

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

Step 4: Usage Example

ExamplePage.tsx

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