Skip to content

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

Free

Compact Pagination for Ark UI

Pages 1, 2, and 3 sit in a tight row with page 2 current. There is no Previous button and no Next button.

Three page links, 1, 2, and 3, sit in a tight row. Page 2 is current. There is no Previous, Next, or ellipsis.

It fits a table footer or a side panel where width is tight. When the set grows, jump with a Select instead of squeezing in more numbers. 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 className="gap-0.5">
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

What does this compact row render?

Three PaginationLinks, for pages 1, 2 and 3. There is no PaginationPrevious or PaginationNext. Page 2 has isActive.

Where does the tight spacing come from?

PaginationContent has className="gap-0.5". That is the only spacing class in the file. The links stay inside PaginationItems on that list.

How is the current page marked?

isActive on the page 2 link selects the outline variant and sets aria-current="page". The other two links stay ghost. Move isActive when the current page changes.

How do I link these numbers to real pages?

Each PaginationLink has href="#". Replace # with that page's URL. Pagination is a nav labeled "pagination".

How do I add Previous and Next to this row?

Put a PaginationPrevious and a PaginationNext in their own PaginationItems, before the first number and after the last. This file leaves both out.

How do I show more than three pages?

Add another PaginationItem and PaginationLink for each page, and keep gap-0.5 on PaginationContent. Put isActive on whichever link is current.

API Reference

Pagination

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

All 19 pagination examples