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.

API Reference

Pagination

Wrapper for the default pagination component. Accepts all standard HTML attributes for <nav> elements.

PaginationContent

Wrapper for the default pagination content component. Accepts all standard HTML attributes for <ul> elements.

PaginationItem

Wrapper for the default pagination item component. Accepts all standard HTML attributes for <li> elements.

PaginationLink

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

The component also accepts all HTML anchor <a> attributes.

PaginationNext

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

The component also accepts all HTML anchor <a> attributes.

PaginationPrevious

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

The component also accepts all HTML anchor <a> attributes.

PaginationEllipsis

Includes a three-dot icon. Accepts all standard HTML attributes for <span> elements.

Changelog

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