# 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}`.

Example: https://hextaui.com/docs/pagination/examples/long
Component docs: https://hextaui.com/docs/pagination.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/pagination-long.json
```

This adds `components/examples/pagination/long.tsx` with the Pagination component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/pagination/long.tsx"
"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} />
}
```

## Props in this example

### Pagination

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | – | Total pages. When set, the bar is built for you; leave it out to compose the parts. |
| `page` | `number` | – |  |
| `onPageChange` | `(page: number) => void` | – |  |

## More Pagination examples

- [Compact](https://hextaui.com/docs/pagination/examples/compact.md)
- [Links](https://hextaui.com/docs/pagination/examples/links.md)
- [Composable](https://hextaui.com/docs/pagination/examples/composable.md)
- [Right to left](https://hextaui.com/docs/pagination/examples/rtl.md)