Components
Loading preview...
Pixel-art pagination control from 8bitcn.com — pixel-corner border on active page, retro chevron prev/next.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-pagination"use client";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
} from "@/components/ui/8bit-pagination";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" className="font-pixel">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive className="font-pixel">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" className="font-pixel">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
);
}