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

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

Set size="sm", size="md" (the default), or size="lg" once on Pagination. The root publishes the resolved size through data-size, and every link, navigation control, and ellipsis uses that shared visual scale.

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

<section class="mx-auto mt-10 max-w-lg">
  <Pagination size="sm">
    <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>
</section>

<section class="mx-auto mt-10 max-w-lg">
  <Pagination size="lg">
    <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>
</section>

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

export function Example() {
  return (
    <>
      <section className="mx-auto mt-10 max-w-lg">
        <Pagination size="sm">
          <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>
      </section>

      <section className="mx-auto mt-10 max-w-lg">
        <Pagination size="lg">
          <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>
      </section>
    </>
  );
}

Size migration

Before	After
`<PaginationLink size="icon-sm" />`	`<Pagination size="sm"><PaginationLink /></Pagination>`
`<PaginationPrevious size="lg" />`	`<Pagination size="lg"><PaginationPrevious /></Pagination>`

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Pagination

Inherits nav attributes.

Contains the following additional props:

Prop Type Default

size "sm" | "md" | "lg" "md"

Description: Selects the component's visual size.
Classification: Wrapper prop

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

Changelog

v4.0.1

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v4.0.0

Moved size ownership to Pagination; remove size from PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.
Migration: <PaginationLink size="icon-sm" /> becomes <Pagination size="sm"><PaginationLink /></Pagination>.

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