# Pagination

> Page navigation for long lists.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/pagination.json`

## Install

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@aspyn-io/kit";
```

### Basic

Links by default: use asChild for Next.js Link, or onClick for client state.

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></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="#" /></PaginationItem>
  </PaginationContent>
</Pagination>
```

### Compact

Prev/next around the current page for tight layouts.

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>3</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>
```

### Icons only

Icon-only prev/next with a page indicator, ideal beside a data table.

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#" size="icon" aria-label="Previous page">
        <ChevronLeftIcon />
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <span className="px-2 text-sm text-muted-foreground">Page 3 of 12</span>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" size="icon" aria-label="Next page">
        <ChevronRightIcon />
      </PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```