# Rows per page select with range info and first/prev/next/last icons

> Rows per page select with range info and first/prev/next/last icons

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-pagination-12).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-pagination-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-pagination-12-light-27a91c89862f5eee.png
- Registry item: https://reui.io/r/new-york-v4/c-pagination-12.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-pagination-12.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `native-select`, `pagination`

## Files

### `c-pagination-12.tsx`

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export function Pattern() {
  return (
    <Pagination>
      <PaginationContent className="w-full justify-between">
        <PaginationItem className="flex items-center gap-2">
          <span className="text-muted-foreground text-sm whitespace-nowrap">
            Rows per page
          </span>
          <NativeSelect className="w-18" defaultValue="25">
            <NativeSelectOption value="10">10</NativeSelectOption>
            <NativeSelectOption value="25">25</NativeSelectOption>
            <NativeSelectOption value="50">50</NativeSelectOption>
            <NativeSelectOption value="100">100</NativeSelectOption>
          </NativeSelect>
        </PaginationItem>
        <PaginationItem className="flex items-center gap-3">
          <span className="text-muted-foreground text-sm whitespace-nowrap">
            1-25 of 100
          </span>
          <div className="flex gap-1">
            <PaginationLink href="#" size="icon" aria-label="Go to first page">
              <IconPlaceholder
                lucide="ChevronFirstIcon"
                tabler="IconChevronLeftPipe"
                hugeicons="ArrowLeft03Icon"
                phosphor="CaretLineLeftIcon"
                remixicon="RiSkipLeftLine"
                className="size-4"
              />
            </PaginationLink>
            <PaginationLink
              href="#"
              size="icon"
              aria-label="Go to previous page"
            >
              <IconPlaceholder
                lucide="ChevronLeftIcon"
                tabler="IconChevronLeft"
                hugeicons="ArrowLeft01Icon"
                phosphor="CaretLeftIcon"
                remixicon="RiArrowLeftSLine"
                className="size-4"
              />
            </PaginationLink>
            <PaginationLink href="#" size="icon" aria-label="Go to next page">
              <IconPlaceholder
                lucide="ChevronRightIcon"
                tabler="IconChevronRight"
                hugeicons="ArrowRight01Icon"
                phosphor="CaretRightIcon"
                remixicon="RiArrowRightSLine"
                className="size-4"
              />
            </PaginationLink>
            <PaginationLink href="#" size="icon" aria-label="Go to last page">
              <IconPlaceholder
                lucide="ChevronLastIcon"
                tabler="IconChevronRightPipe"
                hugeicons="ArrowRight03Icon"
                phosphor="CaretLineRightIcon"
                remixicon="RiSkipRightLine"
                className="size-4"
              />
            </PaginationLink>
          </div>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```