Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Page Counter Pagination for Vue

Previous and Next sit on either side of the muted text Page 2 of 10, with no page-number links.

UI library: Ark UI

The row is Previous, the muted words Page 2 of 10, and Next. The counter is text, not a link. Both buttons point at #.

People see where they are without a row of numbers, which suits a narrow screen or step-by-step reading. If there is room, show the numbers, or jump with a Select. In Vue, Ark UI does not write the counter. It is a span you fill in.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Pagination anatomy: root, previous, item, ellipsis, next

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem>
      <span class="text-muted-foreground text-sm">Page 2 of 10</span>
    </PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

What sits between Previous and Next?

A span with the literal text "Page 2 of 10" and className="text-muted-foreground text-sm", inside a PaginationItem. It is not a PaginationLink.

Does the counter follow the current page?

No. The string is written in the file. Change the text of that span when the page changes. Nothing in this demo reads a page prop.

What do Previous and Next do here?

They are links with href="#". Default text is "Previous" and "Next", and the accessible names are "Go to previous page" and "Go to next page". The nav is labeled "pagination".

How do I point Previous and Next at real pages?

Replace each href="#" with that page's URL. The counter span has no href.

How do I restyle the counter?

Edit the span's classes. This file uses text-muted-foreground and text-sm so it reads as secondary text between the two controls.

How do I disable Previous on page 1?

This file always renders both controls, and the span still says "Page 2 of 10". Pass count and bind v-model:page. Previous and Next then disable themselves at the ends.

API Reference

Pagination

Sets href="#". The rest is on the Pagination page.

All 19 pagination examples