On this page

Pagination

---
import {
  Pagination,
  PaginationEllipsis,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/starwind/pagination";
---
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#">Prev</PaginationPrevious>
    </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="#">Next</PaginationNext>
    </PaginationItem>
  </PaginationContent>
</Pagination>

Installation

pnpx starwind@latest add pagination

npx starwind@latest add pagination

yarn dlx starwind@latest add pagination

Usage

General Notes

The basic pagination component includes previous/next buttons and numbered pages.

Tip

Use the isActive prop on <PaginationLink> to highlight the current page.

Sizes

Show pagination examples using small and large button sizes.

---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
} from "@/components/starwind/pagination";
---

<section class="mx-auto mt-10 max-w-lg">
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious size="sm" href="#">Prev</PaginationPrevious>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#" isActive>2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-sm" href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis size="icon-sm" />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext size="sm" href="#">Next</PaginationNext>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</section>

<section class="mx-auto mt-10 max-w-lg">
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious size="lg" href="#">Prev</PaginationPrevious>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#" isActive>2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink size="icon-lg" href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis size="icon-lg" />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext size="lg" href="#">Next</PaginationNext>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</section>

API Reference

Pagination

Wrapper for the default pagination component.

Prop	Type	Default
`class`	`string`	-

<Pagination>
  <!-- Pagination content -->
</Pagination>

PaginationContent

Wrapper for the default pagination content component.

Prop	Type	Default
`class`	`string`	-

<PaginationContent>
  <!-- Pagination items -->
</PaginationContent>

PaginationItem

Wrapper for the default pagination item component.

Prop	Type	Default
`class`	`string`	-

<PaginationItem>
  <PaginationLink href="#">1</PaginationLink>
</PaginationItem>

PaginationLink

A link component for page numbers with active state support. This uses default starwind button styles and similar props.

Prop	Type	Default
`isActive`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"icon"`
`href`	`string`	-
`class`	`string`	-

<PaginationLink href="#" isActive>2</PaginationLink>

Additional Notes:

isActive: Highlights the current page

PaginationNext

A specialized wrapper of <PaginationLink> for the “Next” button that includes a right chevron icon.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"md"`
`href`	`string`	-
`class`	`string`	-

<PaginationNext href="#">Next</PaginationNext>

PaginationPrevious

A specialized wrapper of <PaginationLink> for the “Previous” button that includes a left chevron icon.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"md"`
`href`	`string`	-
`class`	`string`	-

<PaginationPrevious href="#">Prev</PaginationPrevious>

PaginationEllipsis

Includes a three-dot icon to indicate skipped pages.

Prop	Type	Default
`size`	`"icon-sm" \| "icon" \| "icon-lg"`	`"icon"`
`class`	`string`	-

<PaginationEllipsis />

Changelog

v3.0.2

add size prop to PaginationEllipsis
Adjust PaginationNext and PaginationPrevious to use button variant props for sizes

v3.0.1

Add named slot “icon” to PaginationEllipsis to enable easy icon swapping, and a default slot for the sr-only label
Add named slot “icon” to PaginationNext and Pagination Previous to enable easy icon swapping

v3.0.0

Now requires the starwind button component installed to make use of the button variants for PaginationLink

v2.1.0

Add data-slot attribute to enable global styling updates

v2.0.1

Add eslint comments to disable “no-explicit-any” when using Astro special syntax to require a child element

v2.0.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts.
Removed radius prop now that classes like “rounded-full” can be passed to the components to override, taking advantage of tailwind-variants