Component

Pagination

A pagination component for navigating between pages with Neo-Brutalism styling. Features first/last buttons, page numbers with ellipsis, and multiple sizes.

Preview

Installation

pnpm dlx brutx@latest add pagination

Usage

import { Pagination } from "@/components/ui/pagination"

const [currentPage, setCurrentPage] = React.useState(1);

<Pagination
  currentPage={currentPage}
  totalPages={10}
  onPageChange={setCurrentPage}
/>

Many Pages (with ellipsis)

Sizes

Small
Default
Large

Without Page Numbers

Props

PropTypeDefault
currentPagenumberrequired
totalPagesnumberrequired
onPageChange(page: number) => voidrequired
size"sm" | "default" | "lg""default"
showFirstLastbooleantrue
showPageNumbersbooleantrue