Wensity

Pagination

Page navigation with numbered pages, compact counters, first and last controls, and progressive loading for lists.

paginationnavigationpagesload morecompactprimitivedashboard
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}
    />
  );
}

Props

PropTypeDefaultDescription
pagenumber-Current page, 1-indexed. Required.
totalPagesnumber-Total number of pages. Required.
onPageChange(page: number) => void-Called when the active page changes. Required.
variant"default" | "compact" | "with-first-last" | "load-more""default"Control set to render. load-more swaps pages for a single button.
size"sm" | "md""md"Control height and text size.
siblingCountnumber1Page links shown either side of the current page.
isLoadingbooleanfalseShows a busy state on the load-more button.
hasMorebooleantrueWhether more items remain, for the load-more variant.
onLoadMore() => void-Called when the load-more button is pressed.