Tile UI Vue
Source code

Components

Pagination

Navigation pagination primitives.

Use Pagination to page through long lists.

import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from '@tile-ui/vue';
 
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/vue';
 
<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

Item Purpose
pagination Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Pagination

No custom props.

PaginationContent

No custom props.

PaginationItem

No custom props.

Prop Type Default
isActive boolean —
size 'default' | 'sm' | 'lg' | 'icon' —

PaginationEllipsis

No custom props.

PreviousNavigationMenuNextPopover