Components

Pagination

Page controls with previous, next, numeric links, and ellipsis—matching shadcn pagination composition.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add pagination to your project.

watermelon add pagination
2

Import the component

Import Pagination from your local UI registry output.

Import

import { Pagination } from "@/components/ui/pagination";

Import

Import

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

Usage

Compose items inside PaginationContent. Use PaginationLink with active for the current page.

Basic

Loading...

API Reference

PaginationLink accepts active and disabled. On web, links use onClick; on native, onPress from Pressable.