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

<ComponentPreview name="p-pagination-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/pagination
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="pagination" title="components/ui/pagination.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

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

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## API Reference

This is a custom component, not a Base UI wrapper.

### Pagination

Root navigation container with `role="navigation"` and `aria-label="pagination"`.

### PaginationContent

Unordered list container for pagination items.

### PaginationItem

Individual list item container.

### PaginationLink

Link element for page numbers. Supports the `render` prop.

| Prop       | Type                                  | Default     | Description                                      |
| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |
| `isActive` | `boolean`                             | -           | Highlights the link as the current page          |
| `size`     | `"default" \| "icon"`                 | `"icon"`    | Controls the link size                           |
| `render`   | `React.ReactElement`                  | -           | Render as a different element (e.g., Next.js Link) |

### PaginationPrevious

Link to the previous page. Includes a chevron left icon and "Previous" text.

### PaginationNext

Link to the next page. Includes "Next" text and a chevron right icon.

### PaginationEllipsis

Ellipsis indicator for skipped pages. Displays "..." with screen reader text "More pages".