Skip to content

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

Free

Default Size Pagination for Ark UI

Previous, pages 1 to 3 with page 2 current, and Next, at the default button size and the default spacing.

The row is Previous, pages 1, 2, and 3, and Next. Page 2 is current. Nothing here changes the size or the gap. Every href is #.

Treat it as the baseline next to the small, large, compact, and spacious rows. If people only move forward, a Button is simpler. In React, Ark UI follows the href on each control.

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

FAQ

Which size does this pagination use?

The file passes no size and no height class. PaginationLink defaults to size="icon-md". PaginationPrevious and PaginationNext pass size="md".

What is in the row?

PaginationPrevious, links for 1, 2 and 3, and PaginationNext. Page 2 has isActive, so it is the outline link with aria-current="page".

How is the gap chosen?

PaginationContent has no gap-* class in this file. The gap comes from the cn-pagination-content style, which is gap-0.5 in some styles and gap-1 in others.

How do I point Previous, the numbers, and Next at real URLs?

Every href is #. Set href on PaginationPrevious, each PaginationLink, and PaginationNext to that page's URL.

How do I change the Previous and Next words?

Pass text. The defaults are "Previous" and "Next". The accessible names are "Go to previous page" and "Go to next page", and the nav is labeled "pagination".

How do I stop Previous on the first page?

This demo always renders PaginationPrevious with href="#". Pass count and Previous and Next disable themselves at the ends.

API Reference

Pagination

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

All 19 pagination examples