Pagination

Pagination with page navigation, next and previous links.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/pagination

Lineage

Shadcn

Docs

Spoke

Anatomy

import {
	Pagination,
	PaginationContent,
	PaginationItem,
	PaginationLink,
	PaginationPrevious,
	PaginationNext,
	PaginationEllipsis,
} from "@/components/ui/pagination"

export default () => (
	<Pagination>
		<PaginationContent>
			<PaginationItem>
				<PaginationPrevious />
			</PaginationItem>
			<PaginationItem>
				<PaginationLink />
			</PaginationItem>
			<PaginationItem>
				<PaginationEllipsis />
			</PaginationItem>
			<PaginationItem>
				<PaginationNext />
			</PaginationItem>
		</PaginationContent>
	</Pagination>
)

Spoke utility classes

This component uses button variants for styling and inherits all button CSS variables. See the button component documentation for available theming options.