Pagination

Navigation controls for moving through multi-page content. Renders a semantic <nav> with <a> links — no JavaScript required for basic usage.

✓Renders semantic <nav role='navigation'> and <a> elements
✓PaginationLink marks the active page with aria-current='page'
✓PaginationPrevious and PaginationNext have built-in aria-labels
✓PaginationEllipsis is aria-hidden with a screen-reader-only label
✓Unstyled <a> links — works with any router (href, Link, etc.)
✓No JavaScript required — fully functional with plain href attributes

import { Pagination }from "@aetherstack/ui"

pagination.tsx

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

export function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Usage

Basic

5 pages with the current page highlighted using isActive.

With ellipsis

Use PaginationEllipsis to indicate hidden page ranges for large page counts.

Props

Prop	Type	Default	Description
isActive	boolean	false	Marks this link as the current page — applies outline style and sets aria-current='page'.
href	string	—	The URL this pagination link points to.

PaginationPrevious / PaginationNext

Prop	Type	Default	Description
href	string	—	URL for the previous or next page.
className	string	—	Additional class names merged onto the link.

PaginationEllipsis

Prop	Type	Default	Description
className	string	—	Additional class names for the ellipsis span.

* Required props

Accessibility

→Wrapped in <nav role='navigation' aria-label='pagination'> for screen reader landmark navigation.
→Active page link has aria-current='page' — screen readers announce it as the current page.
→PaginationPrevious has aria-label='Go to previous page'; PaginationNext has 'Go to next page'.
→PaginationEllipsis is aria-hidden with a visually hidden 'More pages' span for screen readers.
→Use real href values — not # — so keyboard users and screen readers can navigate correctly.