# Pagination
Navigation between pages of results.
Source: [pagination.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/pagination.tsx)
```tsx
import * as React from "react";
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
const total = 12;
function pageList(current: number) {
const pages = [...new Set([1, current - 1, current, current + 1, total])]
.filter((page) => page >= 1 && page <= total)
.sort((a, b) => a - b);
const items: (number | "ellipsis")[] = [];
let previous = 0;
for (const page of pages) {
if (page - previous > 1) items.push("ellipsis");
items.push(page);
previous = page;
}
return items;
}
export default function PaginationInteractive() {
const [page, setPage] = React.useState(5);
const go = (next: number) => (event: React.MouseEvent) => {
event.preventDefault();
setPage(Math.min(total, Math.max(1, next)));
};
return (
{pageList(page).map((item, index) =>
item === "ellipsis" ? (
) : (
{item}
),
)}
);
}
```
## Installation
Add the registry, once per project:
```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```
Then add the component:
```bash
npx shadcn@latest add @jarvis/pagination
```
## Usage
```tsx
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
export function InvoicePagination() {
return (
1
2
12
);
}
```
Mark the current page with `isActive`. On the first or last page, set `disabled` on
`PaginationPrevious` or `PaginationNext`.
## Composition
- `Pagination`
- `PaginationContent`
- `PaginationItem`
- `PaginationPrevious`
- `PaginationLink`
- `PaginationEllipsis`
- `PaginationNext`
## Examples
### Compact
Leave out the page numbers when you only need previous and next. `text` changes their labels.
```tsx
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { preventNavigation } from "@/examples/data";
export default function PaginationCompact() {
return (
Showing 41–50 of 118 invoices
);
}
```
## Props
| Part | Extends |
| --- | --- |
| `Pagination` | `