# Pagination

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import {
  Pagination,
  PaginationEllipsis,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/starwind/pagination";
---
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#">Prev</PaginationPrevious>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#">Next</PaginationNext>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```
  </div>
  <div slot="react">
```tsx
import {
      Pagination,
      PaginationEllipsis,
      PaginationContent,
      PaginationItem,
      PaginationLink,
      PaginationNext,
      PaginationPrevious,
    } from "@/components/starwind/pagination";

export function Example() {
  return (
    <>
      <Pagination>
            <PaginationContent>
              <PaginationItem>
                <PaginationPrevious href="#">Prev</PaginationPrevious>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#">1</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#" isActive>2</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#">3</PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationEllipsis />
              </PaginationItem>
              <PaginationItem>
                <PaginationNext href="#">Next</PaginationNext>
              </PaginationItem>
            </PaginationContent>
          </Pagination>
    </>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add pagination
```

## Usage

### General Notes

The basic pagination component includes previous/next buttons and numbered pages.

> **Tip:** Use the `isActive` prop on `<PaginationLink>` to highlight the current page.

### Sizes

Show pagination examples using small and large button sizes.

```astro
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
} from "@/components/starwind/pagination";
---

<section class="mx-auto mt-10 max-w-lg">
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious size="sm" href="#">Prev</PaginationPrevious>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#" isActive>2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis size="icon-sm" />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext size="sm" href="#">Next</PaginationNext>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</section>

<section class="mx-auto mt-10 max-w-lg">
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious size="lg" href="#">Prev</PaginationPrevious>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#" isActive>2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis size="icon-lg" />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext size="lg" href="#">Next</PaginationNext>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</section>
```

## Framework Availability
Pagination is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Pagination
- Inherits nav attributes.

### PaginationContent
- Inherits ul attributes.

### PaginationItem
- Inherits li attributes.

### PaginationLink
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `isActive` | `boolean` | No | - | Wrapper prop | Applies the active visual state. |
- Inherits Button props. Omits `as`, `ref`, and `variant`.

### PaginationPrevious
- Inherits PaginationLink props.

### PaginationNext
- Inherits PaginationLink props.

### PaginationEllipsis
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `size` | `"icon-sm" \| "icon" \| "icon-lg"` | No | `"icon"` | Styled variant | Selects the component's visual size. |
- Inherits span attributes.

## Changelog

### v3.1.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v3.0.4 

- Refactor tailwind variants functions into separate `variants.ts` file

### v3.0.2

- add size prop to `PaginationEllipsis`
- Adjust `PaginationNext` and `PaginationPrevious` to use button variant props for sizes

### v3.0.1 

- Add named slot "icon" to `PaginationEllipsis` to enable easy icon swapping, and a default slot for the `sr-only` label
- Add named slot "icon" to `PaginationNext` and `Pagination Previous` to enable easy icon swapping

### v3.0.0 

- Now requires the starwind button component installed to make use of the button variants for `PaginationLink`

### v2.1.0

- Add `data-slot` attribute to enable global styling updates

### v2.0.1

- Add eslint comments to disable "no-explicit-any" when using Astro special syntax to require a child element

### v2.0.0

- `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts.
- Removed `radius` prop now that classes like "rounded-full" can be passed to the components to override, taking advantage of `tailwind-variants`