Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/originui/numbered-paginationimport { useState } from "react";
import { NumberedPagination } from "@/components/ui/numbered-pagination";
const ITEMS_PER_PAGE = 5;
const TOTAL_ITEMS = 50;
function NumberedPaginationDemo() {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = Math.ceil(TOTAL_ITEMS / ITEMS_PER_PAGE);
const items = Array.from({ length: ITEMS_PER_PAGE }, (_, i) => ({
id: (currentPage - 1) * ITEMS_PER_PAGE + i + 1,
title: `Item ${(currentPage - 1) * ITEMS_PER_PAGE + i + 1}`,
}));
return (
<div className="flex min-w-[400px] flex-col space-y-4 rounded-lg border p-4">
<div className="space-y-2">
{items.map((item) => (
<div
key={item.id}
className="rounded-md bg-muted/50 p-2 text-sm"
>
{item.title}
</div>
))}
</div>
<NumberedPagination
currentPage={currentPage}
totalPages={totalPages}
paginationItemsToDisplay={5}
onPageChange={setCurrentPage}
/>
</div>
);
}
export { NumberedPaginationDemo };