Skip to content

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

Free

Five Page Numbers Pagination for Solid

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

UI library: Ark UI

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 Solid, Ark UI follows each href, and these point at #.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

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