Pagination

A flexible pagination component supporting multiple variants: page, card, button-group.

Default

<Pagination
  page={page} 
  total={total} 
  onPageChange={setPage} 
/>

Minimal

<Pagination 
  variant="minimal" 
  page={page} 
  total={total} 
  onPageChange={setPage} 
/>

Card Default

<Pagination 
  variant="card" 
  page={page} 
  total={total} 
  onPageChange={setPage} 
/>

Card Minimal


<Pagination 
    variant="card-minimal" 
    align="left" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>



<Pagination 
    variant="card-minimal" 
    align="center" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>



<Pagination 
    variant="card-minimal" 
    align="right" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>

Button Group


<Pagination 
    variant="button-group" 
    align="left" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>



<Pagination 
    variant="button-group" 
    align="center" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>



<Pagination 
    variant="button-group" 
    align="right" 
    page={page} 
    total={total} 
    onPageChange={setPage} 
/>

Pagination dot


<div className="flex flex-col gap-8">
    <PaginationDot total={6} size="md" page={page} onPageChange={setPage} />
    <PaginationDot total={6} size="lg" page={page} onPageChange={setPage} />
</div>

Pagination line


<div className="flex flex-col gap-8">
    <PaginationLine
        className="w-64"
        total={6}
        size="md"
        page={page}
        onPageChange={setPage}
    />
    <PaginationLine
        className="w-72"
        total={6}
        size="lg"
        page={page}
        onPageChange={setPage}
    />
</div>

API Reference

Common

Props	Type	Default	Description
page	number	1	Current active page.
total	number	10	Total number of pages.
onPageChange	(page: number) => void	-	Callback triggered when the page changes.

Pagination

Props	Type	Default	Description
variant?	"default" \| "minimal" \| "card" \| "card-minimal" \| "button-group"	"default"	Pagination layout style.
align?	"left" \| "center" \| "right"	"left"	Alignment (for button-group and card-minimal variants).

Pagination Dot

Props	Type	Default	Description
framed?	boolean	false	Whether the pagination is displayed in a card.
isBrand?	boolean	false	Whether the pagination uses brand colors.
className?	string	-	Additional style.

Pagination Line

Props	Type	Default	Description
size?	"md" \| "lg"	"md"	The size of the pagination line.
framed?	boolean	false	Whether the pagination is displayed in a card.
className?	string	-	Additional style.