Pagination - Empreint

A pagination control with first, previous, page numbers, next and last. Compound API powered by the usePagination hook for state management.

import { Pagination } from "@empreint/ui";
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";

<Pagination page={1} totalRecords={150} maxRecordsPerPage={10} onChange={(page) => console.log(page)}>
	<PaginationFirst><ChevronsLeft /></PaginationFirst>
	<PaginationPrevious><ChevronLeft /></PaginationPrevious>
	<PaginationItems />
	<PaginationNext><ChevronRight /></PaginationNext>
	<PaginationLast><ChevronsRight /></PaginationLast>
</Pagination>

Props

Prop

Type

CSS Variables

Prop

Type