Skip to content

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

Free

With First and Last Pagination for Ark UI

First and Last at the ends, Previous and Next around page 5, which is marked as the current page.

The row is First, Previous, page 5, Next, and Last. Page 5 is current. There are no neighboring page numbers.

Use it for a long list where a run of page numbers would take too much room. People can step one page or jump to either end. A Select covers a jump to the middle. 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="#" size="md">
        First
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        5
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" size="md">
        Last
      </PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

What order are the controls in?

First, PaginationPrevious, page 5, PaginationNext, Last, each in its own PaginationItem.

How do First and Last fit their words?

They are PaginationLinks with size="md", the size Previous and Next use, instead of the default square page size.

How is the current page marked?

isActive on page 5 gives it the outline style and aria-current="page". The other controls are ghost links.

How do I change the Previous and Next words?

Pass text. The defaults are Previous and Next, and the accessible names are Go to previous page and Go to next page. The word is hidden below the sm breakpoint, where only the chevron shows.

What happens at either end of the list?

Pass count and Previous and Next disable themselves at the ends. Control the page with page and onPageChange.

How do I point the links at real pages?

Every href is #. Point First at page 1, Previous and Next at the neighboring pages and Last at the last page.

API Reference

Pagination

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

All 19 pagination examples