Pagination

Stable

Navigation sequence component for dividing massive telemetry logs, database rows, and node rosters into discrete, indexable pages.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Pagination, 
  PaginationContent, 
  PaginationItem, 
  PaginationLink, 
  PaginationPrevious, 
  PaginationNext, 
  PaginationEllipsis,
  usePagination 
} from '@siberui/react';

Basic Usage & Item Anatomy

Pagination organizes page links, ellipsis skips, and directional step buttons inside an accessible <nav> landmark.

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#prev" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#3">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#next" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Interactive Controlled Pagination with usePagination

Use the built-in usePagination hook to automatically generate page ranges and ellipses based on total page counts.

Viewing Epoch Frame 3 of 10

tsx

const [currentPage, setCurrentPage] = React.useState(3);
const totalPages = 10;
const paginationRange = usePagination({ totalPages, currentPage });

<Pagination variant="neon">
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious
        onClick={(e) => {
          e.preventDefault();
          if (currentPage > 1) setCurrentPage(currentPage - 1);
        }}
      />
    </PaginationItem>
    {paginationRange.map((page, idx) => (
      <PaginationItem key={idx}>
        {page === '...' ? (
          <PaginationEllipsis />
        ) : (
          <PaginationLink
            isActive={currentPage === page}
            onClick={(e) => {
              e.preventDefault();
              setCurrentPage(Number(page));
            }}
          >
            {page}
          </PaginationLink>
        )}
      </PaginationItem>
    ))}
    <PaginationItem>
      <PaginationNext
        onClick={(e) => {
          e.preventDefault();
          if (currentPage < totalPages) setCurrentPage(currentPage + 1);
        }}
      />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Neon Cybernetic Paginator

Pass variant="neon" to apply cyan laser button frames, active glow halos, and monospace digits.

tsx

<Pagination variant="neon">
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#prev" /></PaginationItem>
    <PaginationItem><PaginationLink href="#1">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#2" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#3">3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#next" /></PaginationItem>
  </PaginationContent>
</Pagination>

Frosted Cyber-Glass Log Paginator

Composite pagination bar layered over circuit textures with perimeter laser sweeps.

INCIDENT LOG PARTITIONS

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center justify-center space-y-4">
  <span className="font-mono text-xs font-bold text-white">INCIDENT LOG PARTITIONS</span>
  <Pagination variant="neon">
    <PaginationContent>
      <PaginationItem><PaginationPrevious href="#p" /></PaginationItem>
      <PaginationItem><PaginationLink href="#1" isActive>01</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#2">02</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="#3">03</PaginationLink></PaginationItem>
      <PaginationItem><PaginationNext href="#n" /></PaginationItem>
    </PaginationContent>
  </Pagination>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Index Deck

Composite mission defense card with integrated pagination controls.

TELEMETRY FRAME INDEX

BUFFERED

> Ingesting Frame Cluster 0x4B... [VALID]

> Packet Integrity: 100.0%

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">TELEMETRY FRAME INDEX</CardTitle>
      <Badge variant="neon" size="sm">BUFFERED</Badge>
    </div>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <div className="space-y-1 font-mono text-xs text-slate-300">
      <p>&gt; Ingesting Frame Cluster 0x4B... [VALID]</p>
      <p>&gt; Packet Integrity: 100.0%</p>
    </div>

    <Pagination variant="neon">
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#p" /></PaginationItem>
        <PaginationItem><PaginationLink href="#1" isActive>1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#2">2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#n" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  </CardContent>
</Card>

API Reference

PROPERTIES (2)← swipe to inspect →

Property	Description	Type	Default
variant	Visual theme for Pagination and its links.	"default" \| "neon" \| "ghost"	"default"
isActive	For PaginationLink: Marks link as the active current page.	boolean	false

Accessibility

ARIA Current: Active page links receive aria-current="page".
Direction Labels: Step buttons contain explicit aria-label="Go to previous page" and aria-label="Go to next page".

Best Practices

Ellipsis Truncation: For datasets exceeding 7 pages, utilize usePagination to prevent long horizontal overflows.