Skip to content

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

Free

With Page Counter Pagination for Ark UI

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

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 React, Ark UI does not write the counter. It is a span you fill in.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <span className="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 Previous and Next disable themselves at the ends.

API Reference

Pagination

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

All 19 pagination examples