# Pagination: Right to left

> `usePagination` returns the page and ellipsis items for custom layouts. Chevrons flip in right-to-left text.

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

## Add this example

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

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

## Source

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

import * as React from "react"

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

export function PaginationRtl() {
  const [page, setPage] = React.useState(2)
  const { items, hasPrevious, hasNext } = usePagination({ page, count: 3 })

  return (
    <div dir="rtl">
      <Pagination aria-label="التنقل بين الصفحات">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              text="السابق"
              aria-label="الصفحة السابقة"
              render={<button type="button" />}
              disabled={!hasPrevious}
              onClick={() => setPage(page - 1)}
            />
          </PaginationItem>
          {items.map((item) =>
            item.type === "page" ? (
              <PaginationItem key={item.page}>
                <PaginationLink
                  render={<button type="button" />}
                  isActive={item.page === page}
                  onClick={() => setPage(item.page)}
                >
                  {item.page.toLocaleString("ar-EG")}
                </PaginationLink>
              </PaginationItem>
            ) : null
          )}
          <PaginationItem>
            <PaginationNext
              text="التالي"
              aria-label="الصفحة التالية"
              render={<button type="button" />}
              disabled={!hasNext}
              onClick={() => setPage(page + 1)}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}
```

## 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)
- [Composable](https://hextaui.com/docs/pagination/examples/composable.md)