Pagination

Page navigation for lists, counters, jumps, and progressive loading.

Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Classic numbered pages with a sliding active indicator.

examples/pagination-default.tsx
"use client";
import { useState } from "react";
import { Pagination } from "@/components/wensity/pagination";
export function PaginationDefault() {
const [page, setPage] = useState(1);
return <Pagination page={page} totalPages={10} onPageChange={setPage} />;
}

Compact

Minimal page counter with prev/next arrows.

examples/pagination-compact.tsx
"use client";
import { useState } from "react";
import { Pagination } from "@/components/wensity/pagination";
export function PaginationCompact() {
const [page, setPage] = useState(1);
return <Pagination variant="compact" page={page} totalPages={10} onPageChange={setPage} />;
}

With First & Last

Four-button navigation with first/last page jump controls.

examples/pagination-with-first-last.tsx
"use client";
import { useState } from "react";
import { Pagination } from "@/components/wensity/pagination";
export function PaginationWithFirstLast() {
const [page, setPage] = useState(5);
return <Pagination variant="with-first-last" page={page} totalPages={20} onPageChange={setPage} />;
}

Load More

Single button for progressive loading with a bottom progress bar.

examples/pagination-load-more.tsx
"use client";
import { useState } from "react";
import { Pagination } from "@/components/wensity/pagination";
export function PaginationLoadMore() {
const [count, setCount] = useState(10);
const [loading, setLoading] = useState(false);
return (
<Pagination
variant="load-more"
page={1}
totalPages={5}
onPageChange={() => {}}
isLoading={loading}
hasMore={count < 50}
onLoadMore={() => {
setLoading(true);
setTimeout(() => { setCount(c => Math.min(c + 10, 50)); setLoading(false); }, 1500);
}}
loadedCount={count}
totalCount={50}
/>
);
}