Skip to content

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

Free

Spacious Pagination for Ark UI

Pages 1 to 3, with page 2 current, sit farther apart than the default. There is no Previous or Next.

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

The extra space makes each number an easier target on a calm page, such as a blog. A tight footer wants the compact gap. To step without numbers, use a Button pair. In React, Ark UI does not choose the gap.

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

FAQ

Where does the wide spacing come from?

PaginationContent has className="gap-3". That class is the whole difference from a plain row of the same three links.

What does the row render?

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

How is the current page marked?

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

How do I link the three numbers?

Each href is #. Set it to that page's URL. Pagination is a nav labeled "pagination".

How do I change the space between the links?

Change gap-3 on PaginationContent. The links themselves have no margin class in this file.

How do I add Previous and Next without losing the gap?

Add them as PaginationItems inside the same PaginationContent, so gap-3 applies to them too. This file renders only the three numbers.

API Reference

Pagination

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

All 19 pagination examples