---
title: Pagination
description: Pagination with page navigation, next and previous links.

link:
  doc: https://kobalte.dev/docs/core/components/pagination
  api: https://kobalte.dev/docs/core/components/pagination#api-reference
---

<ComponentPreview name="pagination-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/pagination-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

<Step>

<StepItem>Copy and paste the following code into your project:</StepItem>

  <ComponentSourceTabs>

    ```tsx title="components/ui/pagination" file=<rootDir>/apps/docs/src/registry/ui/pagination.tsx

    ```

    ```tsx title="components/ui/pagination" file=<rootDir>/apps/unocss-playground/src/registry/ui/pagination.tsx

    ```

  </ComponentSourceTabs>

</Step>

</ComponentInstallation>

```tsx
import {
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@components/ui/pagination"
```

```tsx
<Pagination
  count={10}
  itemComponent={(props) => (
    <PaginationItem page={props.page}>{props.page}</PaginationItem>
  )}
  ellipsisComponent={() => <PaginationEllipsis />}
>
  <PaginationPrevious />
  <PaginationItems />
  <PaginationNext />
</Pagination>
```
