104Get started
HextaUI

Pagination: Jump to a page

Click an ellipsis to type a page number. Enter jumps, an out-of-range number shakes the field, and Esc puts the ellipsis back. Turn it off with jump={false}.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLong() {
  const [page, setPage] = React.useState(480)

  return <Pagination page={page} count={1000} onPageChange={setPage} />
}

Add this example

This adds the example as components/examples/pagination/long.tsx, together with the Pagination component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination-long.json

To add only the component, follow the Pagination installation.

Props in this example

The Pagination props this example sets, from the API reference.

Pagination

PropTypeDefault
countTotal pages. When set, the bar is built for you; leave it out to compose the parts.
number–
page
number–
onPageChange
(page: number) => void–

Every prop is in the Pagination API reference.

More Pagination examples

See them all, with keyboard support and accessibility notes, on the Pagination page.

Related components