Pagination controls with numbered pages, ellipsis, compact counters and a load more pattern. Use it for tables, search results and blog archives.
"use client";
import * as React from "react";
import { Pagination } from "@/components/ui/pagination";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
function PreviewPanel({
children,
className,
title,
subtitle,
}: {
children: React.ReactNode;
className?: string;
title?: string;
subtitle?: string;
}) {
return (
<div
className={cn(
wensityCardSurfaceClass,
"w-full max-w-lg p-5 sm:p-6",
className,
)}
>
{title ? (
<div className="mb-5 border-b border-[var(--border)] pb-4">
<p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
{title}
</p>
{subtitle ? (
<p className="mt-1 text-[12px] leading-[1.5] text-[var(--muted-foreground)]">
{subtitle}
</p>
) : null}
</div>
) : null}
{children}
</div>
);
}
/* ── Main Preview ─────────────────────────────────────────── */
export function PaginationPreview() {
const [defaultPage, setDefaultPage] = React.useState(4);
const [compactPage, setCompactPage] = React.useState(3);
const [firstLastPage, setFirstLastPage] = React.useState(5);
const [loadMoreCount, setLoadMoreCount] = React.useState(20);
const [loadMoreLoading, setLoadMoreLoading] = React.useState(false);
return (
<PreviewPanel
title="Pagination"
subtitle="Page navigation with sliding indicator, compact counter, and progressive loading."
>
<div className="space-y-7">
{/* Default */}
<div>
<p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
Default
</p>
<div className="flex justify-center">
<Pagination
page={defaultPage}
totalPages={12}
onPageChange={setDefaultPage}
/>
</div>
</div>
{/* Compact */}
<div>
<p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
Compact
</p>
<div className="flex justify-center">
<Pagination
variant="compact"
page={compactPage}
totalPages={8}
onPageChange={setCompactPage}
/>
</div>
</div>
{/* With First & Last */}
<div>
<p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
With First & Last
</p>
<div className="flex justify-center">
<Pagination
variant="with-first-last"
page={firstLastPage}
totalPages={20}
onPageChange={setFirstLastPage}
/>
</div>
</div>
{/* Load More */}
<div>
<p className="mb-3 text-xs font-semibold text-[var(--muted-foreground)] opacity-60">
Load More
</p>
<div className="flex justify-center">
<Pagination
variant="load-more"
page={1}
totalPages={5}
onPageChange={() => {}}
isLoading={loadMoreLoading}
hasMore={loadMoreCount < 60}
onLoadMore={() => {
setLoadMoreLoading(true);
setTimeout(() => {
setLoadMoreCount((c) => Math.min(c + 10, 60));
setLoadMoreLoading(false);
}, 1500);
}}
loadedCount={loadMoreCount}
totalCount={60}
/>
</div>
</div>
</div>
</PreviewPanel>
);
}
/* ── Card Preview (compact) ──────────────────────────────────── */
/* ── Example: Default ─────────────────────────────────────── */
/* ── Example: Compact ─────────────────────────────────────── */
/* ── Example: With First & Last ───────────────────────────── */
/* ── Example: Load More ────────────────────────────────────── */
export default function Demo() {
return <PaginationPreview />;
}