Photonix

Pagination

Controls for navigating between multiple pages of content.

Preview

41-60of 248
...
Items per page
20
Usage
"use client";

import { useState } from 'react';
import { Pagination } from '@photonix/ultimate';

export default function PaginationBasicExample() {
    const [currentPage, setCurrentPage] = useState(3);
    const [itemsPerPage, setItemsPerPage] = useState(20);

    return (
        <Pagination
            currentPage={currentPage}
            totalItems={248}
            itemsPerPage={itemsPerPage}
            onPageChange={setCurrentPage}
            onItemsPerPageChange={setItemsPerPage}
            showItemsPerPage
            showItemRange
        />
    );
}

Component API

Pagination

Prop
Type
Default
Description
currentPage
number
-
Current page number (1-indexed)
totalItems
number
-
Total number of items
itemsPerPage
number
-
Number of items per page
itemsPerPageOptions
number[]
[10, 20, 50, 100]
Options for items per page dropdown
onPageChange
((page: number) => void)
-
Callback when page changes
onItemsPerPageChange
((itemsPerPage: number) => void)
-
Callback when items per page changes
showItemsPerPage
boolean
true
Show items per page selector
showItemRange
boolean
true
Show item range text (e.g., "1-10 of 1200")
layout
"adaptive" | "stacked"
'adaptive'
Layout behavior for narrow widths
className
string
-
Additional CSS class

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System