Pagination
Controls for moving between pages.
Upstream documentationExamples
Showing sample page 1 of 3
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Pagination
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/pagination.json'Usage
A complete example using the installed component and hook paths.
Pagination usage
"use client";import { useState } from "react";import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";function PaginationPreview() { const [page, setPage] = useState(1); return ( <div className="space-y-2 text-center"> <Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="/docs" aria-disabled={page === 1} onClick={(event) => { event.preventDefault(); setPage((current) => Math.max(1, current - 1)); }} /> </PaginationItem> {[1, 2, 3].map((number) => ( <PaginationItem key={number}> <PaginationLink href="/docs" isActive={page === number} aria-label={`Page ${number}`} onClick={(event) => { event.preventDefault(); setPage(number); }} > {number} </PaginationLink> </PaginationItem> ))} <PaginationItem> <PaginationNext href="/docs" aria-disabled={page === 3} onClick={(event) => { event.preventDefault(); setPage((current) => Math.min(3, current + 1)); }} /> </PaginationItem> </PaginationContent> </Pagination> <p aria-live="polite" className="text-xs text-muted-foreground"> Showing sample page {page} of 3 </p> </div> );}export default function Demo() { return <PaginationPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Pagination
Pagination props
React.ComponentProps<"nav">PaginationContent
PaginationContent props
React.ComponentProps<"ul">PaginationEllipsis
PaginationEllipsis props
React.ComponentProps<"span">PaginationItem
PaginationItem props
React.ComponentProps<"li">PaginationLink
PaginationLink props
PaginationLinkProps- size
- "icon"
PaginationNext
PaginationNext props
React.ComponentProps<typeof PaginationLink> & { text?: string }- text
- "Next"
PaginationPrevious
PaginationPrevious props
React.ComponentProps<typeof PaginationLink> & { text?: string }- text
- "Previous"