# Pagination

> Page numbers with ellipses and a gliding current-page indicator.

Component · Free · https://lodeui.com/components/pagination

## When to use

- Paging through tables and lists with a known number of pages.

## When not to use

- Feeds: use infinite scroll or Load more.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/pagination.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Pagination } from "@/components/ui/pagination";

export function Pages() {
  const [page, setPage] = React.useState(1);
  return <Pagination page={page} pageCount={24} onPageChange={setPage} />;
}
```

## API reference

### Pagination

Previous, next and page numbers with ellipses.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| page | `number` | – | Current page, 1-based. |
| pageCount | `number` | – | Total pages. |
| onPageChange | `(page: number) => void` | – | Called with the new page. |
| siblings | `number` | `1` | Pages shown each side of the current one. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between page buttons |
| Enter / Space | Go to the page |

## Accessibility

- nav with aria-label; the current page has aria-current="page".
- Previous and next are labelled.

## Motion

- The current-page highlight slides between numbers.

## Responsive behavior

- Use siblings={0} on phones.

## Performance

- Renders at most about nine buttons.

## Notes for AI

- Pages are 1-based.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [Breadcrumb](https://lodeui.com/components/breadcrumb) — Hierarchy trail that collapses long paths and works with any router link.