Skip to content

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

Free

Five Page Numbers Pagination for Ark UI

Pages 1 through 5 in one row, with page 3 marked current, and no Previous, Next, or ellipsis.

Five page links sit in a row: 1, 2, 3, 4, and 5. Page 3 is current. There are no other controls.

It fits a short gallery or a form that is only five pages. Past that, jump with a Select instead of listing every page. In React, Ark UI follows each href, and these point at #.

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>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        3
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">5</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

Which page links does this row render?

Five PaginationLinks, numbered 1 through 5. Page 3 has isActive. There is no PaginationPrevious, PaginationNext, or PaginationEllipsis.

How is page 3 shown as current?

isActive selects the outline variant and sets aria-current="page". The other four links stay ghost. Move isActive to mark a different link.

How do I show a different run of five pages?

The numbers are hardcoded. Replace 1, 2, 3, 4 and 5, and put isActive on the current one. PaginationContent has no extra gap class in this file.

How do I link each number to its page?

Every href is #. Set each PaginationLink's href to that page's URL. The nav is labeled "pagination".

How do I add Previous and Next around these numbers?

Wrap PaginationPrevious and PaginationNext in PaginationItems, before page 1 and after page 5. This demo renders only the five numbers.

What does a screen reader hear for each link?

The link text is the page number. The current one also has aria-current="page" from isActive. The landmark is the nav labeled "pagination".

API Reference

Pagination

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

All 19 pagination examples