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>

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

export function Example() {
  return (
    <>
      <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

Framework Availability

Astro Available React Available

Pagination is available for Astro and React.

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

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Pagination Link

Inherits Button props. Omits `as`, `ref`, and `variant`.

Contains the following additional props:

Prop Type Default

isActive boolean —

Description: Applies the active visual state.
Classification: Wrapper prop

Pagination Ellipsis

Inherits span attributes.

Contains the following additional props:

Prop Type Default

size "icon-sm" | "icon" | "icon-lg" "icon"

Description: Selects the component's visual size.
Classification: Styled variant

Changelog

v3.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v3.0.4

Refactor tailwind variants functions into separate variants.ts file

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