# Pagination: Composable

> Without `count`, build the bar from the parts, as in shadcn/ui. Pass `render` to use your router's link.

Example: https://hextaui.com/docs/pagination/examples/composable
Component docs: https://hextaui.com/docs/pagination.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/pagination-composable.json
```

This adds `components/examples/pagination/composable.tsx` with the Pagination component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/pagination/composable.tsx"
"use client"

import * as React from "react"

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

const pages = [1, 2, 3]

export function PaginationComposable() {
  const [page, setPage] = React.useState(2)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            render={<button type="button" />}
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>
        {pages.map((item) => (
          <PaginationItem key={item}>
            <PaginationLink
              render={<button type="button" />}
              isActive={item === page}
              onClick={() => setPage(item)}
            >
              {item}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            render={<button type="button" />}
            disabled={page === pages.length}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

## Props in this example

### PaginationLink

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isActive` | `boolean` | `false` | Marks the current page with aria-current="page". |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<a>` |  |

## More Pagination examples

- [Jump to a page](https://hextaui.com/docs/pagination/examples/long.md)
- [Compact](https://hextaui.com/docs/pagination/examples/compact.md)
- [Links](https://hextaui.com/docs/pagination/examples/links.md)
- [Right to left](https://hextaui.com/docs/pagination/examples/rtl.md)