Pagination

Composable page-number navigation. Combine PaginationFirst/Last/Previous/Next with PaginationItem and PaginationEllipsis to build any layout.

Simple

Just previous, a few pages, and next — no edges or ellipsis.

Number bar with prev/next, first/last, and ellipsis for long ranges.

showEdges keeps the first and last page visible even on long ranges.

Bind v-model:page to a ref so the active page is reflected outside the component.

Current page: 1

Override the previous/next slots with a bare chevron and use size icon page buttons for a compact bar.

Prop	Type	Default	Description
`page`	`number`	`1`	Current page. Supports v-model.
`total`	`number`	`0`	Total number of items.
`itemsPerPage`	`number`	`10`	How many items per page.
`siblingCount`	`number`	`1`	Sibling pages around the current page.
`showEdges`	`boolean`	`false`	Always show first and last page numbers.

Event	Description
`update:page`	Fires when the page changes. Enables v-model:page.

Slot	Description
`default`	Scoped slot exposing { page, pageCount } to build the content row.

Prop	Type	Default	Description
`value`	`number`	—	(PaginationItem) Page number this button selects. Content lays out the items.

Prop	Type	Default	Description
`class`	`string`	—	Edge navigation buttons. Default slot overrides the icon. Forwards to reka-ui.

Prop	Type	Default	Description
`class`	`string`	—	Placeholder shown where page numbers are collapsed.