Pagination

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationPrevious href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">1</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isActive>2</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">3</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationNext href="#" />
  </PaginationItem>
</PaginationContent>
</Pagination>

Installation

npx bearnie add pagination

import Pagination from "@/components/ui/pagination/Pagination.astro";
import PaginationContent from "@/components/ui/pagination/PaginationContent.astro";
import PaginationItem from "@/components/ui/pagination/PaginationItem.astro";
import PaginationLink from "@/components/ui/pagination/PaginationLink.astro";
import PaginationPrevious from "@/components/ui/pagination/PaginationPrevious.astro";
import PaginationNext from "@/components/ui/pagination/PaginationNext.astro";
import PaginationEllipsis from "@/components/ui/pagination/PaginationEllipsis.astro";

Usage

import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
} from "@/components/ui"

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationPrevious href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">1</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isActive>2</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">3</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationNext href="#" />
  </PaginationItem>
</PaginationContent>
</Pagination>

Examples

Simple

A simple pagination with only page numbers.

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationLink href="#">1</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isActive>2</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">3</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">4</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">5</PaginationLink>
  </PaginationItem>
</PaginationContent>
</Pagination>

Icons only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationPrevious href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationNext href="#" />
  </PaginationItem>
</PaginationContent>
</Pagination>

With ellipsis

Use PaginationEllipsis to indicate more pages.

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationPrevious href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">1</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">4</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isActive>5</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">6</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">10</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationNext href="#" />
  </PaginationItem>
</PaginationContent>
</Pagination>

First and last

Include first and last page buttons for quick navigation.

<Pagination>
<PaginationContent>
  <PaginationItem>
    <PaginationLink href="#">« First</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationPrevious href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">3</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#" isActive>4</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">5</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationNext href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">Last »</PaginationLink>
  </PaginationItem>
</PaginationContent>
</Pagination>

Anatomy

Pagination - The root container (nav element)
PaginationContent - The list container (ul element)
PaginationItem - Individual list item (li element)
PaginationLink - A clickable page number link
PaginationPrevious - Previous page link with icon
PaginationNext - Next page link with icon
PaginationEllipsis - Ellipsis indicator for truncated pages

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes

PaginationContent

Prop	Type	Default	Description
class	string	-	Additional CSS classes

PaginationItem

Prop	Type	Default	Description
class	string	-	Additional CSS classes

PaginationLink

Prop	Type	Default	Description
href	string	#	Link URL
isActive	boolean	false	Whether the link is the current page
size	default \| sm \| lg \| icon	icon	Size of the link
class	string	-	Additional CSS classes

PaginationPrevious

Prop	Type	Default	Description
href	string	#	Link URL
class	string	-	Additional CSS classes

PaginationNext

Prop	Type	Default	Description
href	string	#	Link URL
class	string	-	Additional CSS classes

PaginationEllipsis

Prop	Type	Default	Description
class	string	-	Additional CSS classes