# Pagination
Pagination is a neobrutalist React component from Cruise UI. Page numbers with Previous / Next; compacts to "Page 3 of 12" on phones.
Install (with the @cruiseui registry in components.json, see Installation):
```bash
npx shadcn@latest add @cruiseui/pagination
```
Import: `import { CruisePagination, cruisePageItems } from "@/components/cruise/pagination";`
## When to use
Long lists split into pages: orders, search results.
## When not to
Feeds (a "Load more" button is simpler).
## Example (React)
```tsx
"use client";
import { useState } from "react";
import { CruisePagination } from "@/components/cruise/pagination";
export default function PaginationExample() {
const [page, setPage] = useState(5);
return ;
}
```
## HTML
Needs theme.css (https://cruiseui.dev/theme.css).
```html
```
## Props: CruisePagination
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `page` | `number` | — | The current page (1-based). |
| `pageCount` | `number` | — | — |
| `onPageChange` | `(page: number) => void` | — | — |
| `className?` | `string` | — | — |
## Accessibility
-