Cyberpunk Telemetry Pagination

paginations

Terminal HUD cyberpunk pagination bar with neon cyan status indicators.

#pagination#cyberpunk#telemetry#hud#terminal

Live Interactive Preview

PAG //[03 / 12]

Component Source Code

Select language in the dropdown

CyberTelemetryPagination.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Terminal } from 'lucide-react';
5
6export default function CyberTelemetryPagination() {
7  const [page, setPage] = useState(3);
8  const total = 12;
9
10  return (
11    <div className="w-full max-w-sm sm:max-w-md rounded-2xl border border-cyan-500/30 bg-slate-950 p-4 font-mono text-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.15)] flex items-center justify-between">
12      <div className="flex items-center gap-1.5 text-[11px]">
13        <Terminal className="h-3.5 w-3.5 text-cyan-400" />
14        <span className="text-slate-400">PAG //</span>
15        <span className="text-cyan-300 font-bold">[{String(page).padStart(2, '0')} / {String(total).padStart(2, '0')}]</span>
16      </div>
17
18      <div className="flex items-center gap-1">
19        <button
20          onClick={() => setPage((p) => Math.max(1, p - 1))}
21          disabled={page === 1}
22          className="rounded-lg border border-cyan-500/30 bg-cyan-950/30 px-2.5 py-1 text-[11px] text-cyan-300 hover:border-cyan-400 hover:bg-cyan-500/20 disabled:opacity-30 transition"
23        >
24          &lt; PREV
25        </button>
26
27        {[1, 2, 3, 4].map((p) => (
28          <button
29            key={p}
30            onClick={() => setPage(p)}
31            className={`h-7 w-7 rounded-lg text-xs font-bold transition ${
32              page === p
33                ? 'bg-cyan-500 text-slate-950 shadow-[0_0_10px_#22d3ee]'
34                : 'text-cyan-400 hover:bg-cyan-950/50'
35            }`}
36          >
37            [{p}]
38          </button>
39        ))}
40
41        <button
42          onClick={() => setPage((p) => Math.min(total, p + 1))}
43          disabled={page === total}
44          className="rounded-lg border border-cyan-500/30 bg-cyan-950/30 px-2.5 py-1 text-[11px] text-cyan-300 hover:border-cyan-400 hover:bg-cyan-500/20 disabled:opacity-30 transition"
45        >
46          NEXT &gt;
47        </button>
48      </div>
49    </div>
50  );
51}

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

Step 4: Usage Example

ExamplePage.tsx

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