Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/hero_ui/the-pagination"use client";
import { Pagination } from "@heroui/react";
import { useState } from "react";
export default function PaginationCustomIcons() {
const [page, setPage] = useState(1);
const totalPages = 3;
return (
<Pagination className="justify-center">
<Pagination.Content>
<Pagination.Item>
<Pagination.Previous
isDisabled={page === 1}
onPress={() => setPage((currentPage) => Math.max(1, currentPage - 1))}
>
<Pagination.PreviousIcon>
<svg
aria-hidden="true"
className="size-5"
fill="none"
viewBox="0 0 24 24"
>
<path
d="M15 18L9 12L15 6"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
</Pagination.PreviousIcon>
<span>Back</span>
</Pagination.Previous>
</Pagination.Item>
{Array.from({ length: totalPages }, (_, index) => {
const pageNumber = index + 1;
return (
<Pagination.Item key={pageNumber}>
<Pagination.Link
isActive={pageNumber === page}
onPress={() => setPage(pageNumber)}
>
{pageNumber}
</Pagination.Link>
</Pagination.Item>
);
})}
<Pagination.Item>
<Pagination.Next
isDisabled={page === totalPages}
onPress={() => setPage((currentPage) => Math.min(totalPages, currentPage + 1))}
>
<span>Forward</span>
<Pagination.NextIcon>
<svg
aria-hidden="true"
className="size-5"
fill="none"
viewBox="0 0 24 24"
>
<path
d="M9 6L15 12L9 18"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
</Pagination.NextIcon>
</Pagination.Next>
</Pagination.Item>
</Pagination.Content>
</Pagination>
);
}