Skip to content

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

Free

Start Ellipsis Pagination for Vue

Near the end of 10 pages: Previous, page 1, an ellipsis, pages 8 to 10 with page 9 current, and Next.

UI library: Ark UI

The row is Previous, page 1, an ellipsis, pages 8, 9, and 10, and Next. Page 9 is current. The ellipsis is not a link. Page 1 stays reachable.

Use it when the current page is near the end and the first page should stay one click away. A Select can jump into the hidden middle. In Vue, Ark UI does not fill that gap. You omit those pages.

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><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">8</PaginationLink></PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" :isActive="true">9</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationLink href="#">10</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

Which pages does this row show?

PaginationPrevious, a link for page 1, a PaginationEllipsis, links for 8, 9 and 10, and PaginationNext. Page 9 has isActive.

What does the ellipsis stand in for?

Pages 2 to 7, which this file does not render. PaginationEllipsis is an aria-hidden span with a more-horizontal icon, not a link.

How is page 9 marked current?

isActive sets the outline variant and aria-current="page". Pages 1, 8 and 10 are ghost links. Move isActive if the current page changes, and change the numbers 8, 9 and 10 to match.

How do I give each control a real URL?

Every href is #. Set it on PaginationPrevious, each PaginationLink, and PaginationNext. The nav is labeled "pagination".

How is the first page kept visible?

As its own PaginationLink with the text 1, placed before the ellipsis. It does not have isActive in this file.

How do I change the Previous and Next words?

Pass text. They default to "Previous" and "Next", with accessible names "Go to previous page" and "Go to next page". The label span uses hidden sm:block.

API Reference

Pagination

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

All 19 pagination examples