Skip to content

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

Free

With Previous and Next Pagination for Vue

The usual short row: Previous and Next with pages 1 to 3 between them, and page 2 marked current.

UI library: Ark UI

The row is Previous, pages 1, 2, and 3, and Next. Page 2 is current. There is no ellipsis and no first or last control. Every href is #.

It is the common pattern for a short list: step one page, or jump to a number. For a feed with no total, drop the numbers. A single Button is enough when there is only a next page. In Vue, Ark UI follows the href you set.

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>
      <PaginationLink href="#" :isActive="true">2</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

How are the arrows and the numbers arranged?

PaginationPrevious, then PaginationLinks for 1, 2 and 3, then PaginationNext. Page 2 has isActive. Each control is in its own PaginationItem.

How is page 2 marked current?

isActive uses the outline variant and sets aria-current="page". Pages 1 and 3 stay ghost. Move isActive to the current link.

How do I give every control a real URL?

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

How do I change the Previous and Next words?

Pass text. The defaults are "Previous" and "Next". The accessible names are "Go to previous page" and "Go to next page". The word uses hidden sm:block, and the chevron is aria-hidden.

How do I drop Previous on the first page?

This file always renders PaginationPrevious and PaginationNext. Pass count and bind v-model:page. Previous and Next then disable themselves at the ends.

How do I list a different three pages?

Change the three link texts and put isActive on the current one. PaginationContent has no gap or size class in this file.

API Reference

Pagination

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

All 19 pagination examples