Components
Loading preview...
Here is Pagination component
npx shadcn@latest add https://21st.dev/r/anubra266/pagination"use client";
import { Pagination } from "@ark-ui/react/pagination";
import {
ChevronLeft,
ChevronRight,
ChevronsLeft,
ChevronsRight,
} from "lucide-react";
export default function WithPageSize() {
return (
<Pagination.Root
count={100}
siblingCount={1}
defaultPageSize={10}
className="flex items-center gap-6 w-full justify-between"
>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<span>Rows per page</span>
<Pagination.Context>
{(pagination) => (
<select
value={pagination.pageSize}
onChange={(e) => pagination.setPageSize(Number(e.target.value))}
className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-gray-100 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500/50 dark:focus:ring-blue-400/50"
>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
</select>
)}
</Pagination.Context>
</div>
<Pagination.Context>
{(pagination) => (
<div className="text-sm text-gray-600 dark:text-gray-400">
{pagination.pageRange.start + 1}-{pagination.pageRange.end} of{" "}
{pagination.count}
</div>
)}
</Pagination.Context>
<div className="flex items-center gap-1">
<Pagination.Context>
{(pagination) => (
<button
onClick={() => pagination.goToFirstPage()}
disabled={pagination.page === 1}
className="inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
<ChevronsLeft className="w-4 h-4" />
</button>
)}
</Pagination.Context>
<Pagination.PrevTrigger className="inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none">
<ChevronLeft className="w-4 h-4" />
</Pagination.PrevTrigger>
<Pagination.NextTrigger className="inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none">
<ChevronRight className="w-4 h-4" />
</Pagination.NextTrigger>
<Pagination.Context>
{(pagination) => (
<button
onClick={() => pagination.goToLastPage()}
disabled={pagination.page === pagination.totalPages}
className="inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
<ChevronsRight className="w-4 h-4" />
</button>
)}
</Pagination.Context>
</div>
</Pagination.Root>
);
}