pagination

Pagination

Lets the shopper move through numbered pages of results, with Previous and Next and, when there are many pages, the first and last page around an ellipsis. The current page is marked from the pagination's own page. In a container narrower than 28rem only the current page stays between Previous and Next, which drop their labels below 24rem.

States: Default

Parts

Part	File	Does
Pagination	Pagination.vue	Groups all parts of the pagination.
PaginationContent	PaginationContent.vue	Lists the page numbers, ellipses and navigation buttons of the pagination.
PaginationEllipsis	PaginationEllipsis.vue	Marks pages that are skipped between the shown page numbers.
PaginationFirst	PaginationFirst.vue	Lets the user jump to the first page.
PaginationItem	PaginationItem.vue	Shows one page number in the list that the user can go to.
PaginationLast	PaginationLast.vue	Lets the user jump to the last page.
PaginationLink	PaginationLink.vue	Links to a specific page and marks it when it is the current one.
PaginationNext	PaginationNext.vue	Lets the user go to the next page.
PaginationPrevious	PaginationPrevious.vue	Lets the user go to the previous page.

Anatomy

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem />
    <PaginationEllipsis />
    <PaginationNext />
  </PaginationContent>
</Pagination>

Styling

Part	Recipe
Pagination	pagination
PaginationContent	pagination-content
PaginationEllipsis	pagination-ellipsis
PaginationNext	pagination-next
PaginationPrevious	pagination-previous

Install

Writes 10 files into components/ui/pagination/. For agents, npx @frontic/ui docs pagination prints this reference as markdown; the MCP server serves the same.

Installs with it: button
npm packages: @lucide/vue; @vueuse/core; reka-ui

Built from

Button

API reference

Pagination Pagination.vue

Groups all parts of the pagination. Renders a <nav>.

Prop	Type	Default
page	number	—

defaultPage	number	1

itemsPerPage*	number	—

total	number	0

siblingCount	number	2

disabled	boolean	false

showEdges	boolean	false

asChild	boolean	false

as	AsTag \| Component	'nav'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'nav'
class	ClassValue	—

Event	Payload
update:page	value: number

Slot	Slot props
default	{ page: number; pageCount: number; }

Recipe pagination	Sets
base: pagination	4 properties

Parts

Anatomy

Styling

Install

Built from

API reference

Pagination Pagination.vue

PaginationContent PaginationContent.vue

PaginationEllipsis PaginationEllipsis.vue

PaginationFirst PaginationFirst.vue

PaginationItem PaginationItem.vue

PaginationLast PaginationLast.vue

PaginationLink PaginationLink.vue

PaginationNext PaginationNext.vue

PaginationPrevious PaginationPrevious.vue