> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Pagination
> Page navigation control with previous/next buttons and numbered page indicators.
```tsx theme={null}
import { Pagination } from "@fanvue/ui";
import type { PaginationProps, PaginationVariant } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { Pagination } from "@fanvue/ui";
```
## Interactive
```tsx theme={null}
import { useState } from "react";
import { Pagination } from "@fanvue/ui";
function Example() {
const [page, setPage] = useState(1);
return ;
}
```
## First Page
```tsx theme={null}
import { Pagination } from "@fanvue/ui";
```
## Interactive Dots
```tsx theme={null}
import { useState } from "react";
import { Pagination } from "@fanvue/ui";
function Example() {
const [page, setPage] = useState(1);
return ;
}
```
## Last Page
```tsx theme={null}
import { Pagination } from "@fanvue/ui";
```
## Props
## Pagination
Page navigation control with previous/next buttons and numbered page indicators. Supports a numbered-buttons layout (`"default"`) and a compact dots layout (`"dots"`).
Current active page (1-indexed).
Total number of pages.
Accessible label for the ` `Page ${page}`"}>
Function that returns an accessible label for each page button.
Accessible label for the next-page button.
Callback fired when the active page changes. Receives the new 1-indexed page number.
Accessible label for the previous-page button.
Display style — numbered page buttons or minimal dots.
## Exported types
Also exported from `@fanvue/ui`: `PaginationProps`, `PaginationVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)