Tile UI React
Source code

Components

Pagination

Navigation pagination primitives.

Use Pagination to page through long lists.

import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from '@tile-ui/react';

export default function PaginationDemo() {
	return (
		<Pagination>
			<PaginationContent>

Registry install

pnpm dlx shadcn@latest add @tile-ui/pagination

Package usage

import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from '@tile-ui/react';
 
<Pagination>
	<PaginationContent>
		<PaginationItem>
			<PaginationPrevious href="#" />
		</PaginationItem>
		<PaginationItem>
			<PaginationLink href="#" isActive>1</PaginationLink>
		</PaginationItem>
		<PaginationItem>
			<PaginationNext href="#" />
		</PaginationItem>
	</PaginationContent>
</Pagination>

Highlights

  • Link, previous, next, and ellipsis
  • Active state
  • Four sizes

Registry dependencies

ItemPurpose
paginationComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Pagination

No custom props.

PaginationContent

No custom props.

PaginationItem

No custom props.

PropTypeDefault
isActiveboolean—
size'default' | 'sm' | 'lg' | 'icon'—

PaginationEllipsis

No custom props.

PreviousNavigationMenuNextPopover