shadcn.io is not affiliated with official shadcn/ui

Components

Free

Pagination for React

Q: Why can I still click Previous on the first page?

Pagination doesn't know your page count. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

Q: How do I show only Previous and Next buttons in Pagination?

Leave out the numbered PaginationLinks and keep PaginationPrevious and PaginationNext. The Icons Only demo above does that, with a rows-per-page Select beside them.

Q: How do I change or translate the Pagination labels?

Pass text on PaginationPrevious and PaginationNext ("Previous" and "Next" by default). For a right-to-left language, set the direction too, as in the RTL demo, so the row and its arrows follow the reading order.

Q: Is the Base UI Pagination accessible?

Yes. It renders a nav landmark labeled "pagination", Previous and Next carry labels for screen readers, and the current page's link gets aria-current="page", so assistive tech announces where you are.

Links for previous, page numbers, and next on a long list, with the current page marked. For React with Base UI, when the list does not fit in one view.

Page numbers, with previous and next, sit under a long list. The current page is marked.

Use it when a collection doesn't fit in one view. The path through the site is a Breadcrumb, not more pages of the same list. In React, Base UI renders a navigation landmark, and each page should keep its own address.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Pagination
├── PaginationItem
├── PaginationEllipsis
├── PaginationFirstTrigger
├── PaginationPrevious
├── PaginationNext
└── PaginationLastTrigger

Usage

import {
  Pagination, PaginationContent, PaginationEllipsis, PaginationItem,
  PaginationLink, PaginationNext, PaginationPrevious,
} from "@/components/ui/pagination";

<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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Simple

Five page links and nothing else, with the current one marked isActive. Use a numbers-only row when there are few pages and a previous or next control would only widen it. Once the list runs long, add those ends and an ellipsis, which is the opening preview. isActive is also how assistive tech knows which page is current.

PreviewCode

Icons Only

Previous and next, with no numbers, beside a rows-per-page Select. That is the compact footer of a data table, where stepping matters more than jumping. Use it when the table already shows a range and numbered links would repeat it. Keep the numbers when someone may need a far page, because stepping one page at a time is a poor way to get there.

PreviewCode

Rtl

dir="rtl" flips the row, and text on previous and next replaces the English words with Arabic labels. The arrows follow the reading order, so previous stays at the start. Pass text whenever the visible word is not the default, because that string is also the accessible name. Numbers in the same script belong in this row too.

PreviewCode

FAQ

How do I track the current page with the Base UI Pagination?

It's presentational: keep the current page in your state or in the URL, render the PaginationLinks around it yourself, and mark the current one with isActive.

How do I use Next.js Link or my router with Pagination in React?

Keep a real URL per page, so people can bookmark page 12 and search engines can follow it. Open components/ui/pagination.tsx and render your router's link (Next.js Link, React Router's Link) where PaginationLink renders its a.

How do I show an ellipsis when Pagination has many pages?

Render the first and last pages, the current page's neighbors, and a PaginationEllipsis in each gap, rather than a link for every page.

Why can I still click Previous on the first page?

Pagination doesn't know your page count. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

How do I show only Previous and Next buttons in Pagination?

Leave out the numbered PaginationLinks and keep PaginationPrevious and PaginationNext. The Icons Only demo above does that, with a rows-per-page Select beside them.

How do I change or translate the Pagination labels?

Pass text on PaginationPrevious and PaginationNext ("Previous" and "Next" by default). For a right-to-left language, set the direction too, as in the RTL demo, so the row and its arrows follow the reading order.

Is the Base UI Pagination accessible?

Yes. It renders a nav landmark labeled "pagination", Previous and Next carry labels for screen readers, and the current page's link gets aria-current="page", so assistive tech announces where you are.

How do I install Pagination in React?

Run the command from the Installation section above: it adds Pagination and the button it uses to your project's ui folder. The shadcn CLI writes components/ui/pagination.tsx, a file you own and can edit.

API Reference

Pagination

<nav> data-slot="pagination"

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

PaginationContent

<ul> data-slot="pagination-content"

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

PaginationItem

data-slot="pagination-item"

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

PaginationLink

data-slot="pagination-link"

PropType

isActive?boolean

Marks the link as the current page: outlined, and aria-current="page".

size?"icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

Ark default: md.

Type: "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default: "icon-md"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-active?string

Mirrors isActive.

PaginationPrevious

PropType

isActive?boolean

Marks the link as the current page: outlined, and aria-current="page".

size?"icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

Ark default: md.

Type: "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default: md

text?string

The button's label, beside its arrow.

Default: "Previous"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-icon"inline-start"

Default: "inline-start"

PaginationNext

PropType

isActive?boolean

Marks the link as the current page: outlined, and aria-current="page".

size?"icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

Ark default: md.

Type: "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default: md

text?string

The button's label, beside its arrow.

Default: "Next"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-icon"inline-end"

Default: "inline-end"

PaginationEllipsis

<span> data-slot="pagination-ellipsis"

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

With other components

Free
Select
Selection
Rows per page
Free
Table
Data
Footer under the rows
Free
Field
Inputs
Label the page size
Free
Input
Inputs
Jump to a page
Free
Skeleton
Feedback
While the next page loads
Free
Button
Buttons
Previous and next

Free
Breadcrumb
Navigation
Path, not pages
Free
Tabs
Navigation
Switch whole views
Free
Carousel
Media
Prev/next slides
Free
Button Group
Buttons
Grouped page buttons
Free
Empty
Feedback
Zero results
Free
Steps
Navigation
A known sequence

All 105 components 19 pagination examples

Installation

Anatomy

Usage

Accessibility

Demos

Simple

Icons Only

Rtl

FAQ

How do I track the current page with the Base UI Pagination?

How do I use Next.js Link or my router with Pagination in React?

How do I show an ellipsis when Pagination has many pages?

Why can I still click Previous on the first page?

How do I show only Previous and Next buttons in Pagination?

How do I change or translate the Pagination labels?

Is the Base UI Pagination accessible?

How do I install Pagination in React?

API Reference

Pagination

PaginationContent

PaginationItem

PaginationLink

PaginationPrevious

PaginationNext

PaginationEllipsis

With other components

Related