104Get started
HextaUI

Pagination: Links

With getPageHref, every page is a real link, so it can be opened in a new tab. Plain clicks still call onPageChange.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLinks() {
  const [page, setPage] = React.useState(3)

  return (
    <Pagination
      page={page}
      count={12}
      getPageHref={(target) => `#page-${target}`}
      onPageChange={setPage}
    />
  )
}

Add this example

This adds the example as components/examples/pagination/links.tsx, together with the Pagination component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination-links.json

To add only the component, follow the Pagination installation.

Props in this example

The Pagination props this example sets, from the API reference.

Pagination

PropTypeDefault
countTotal pages. When set, the bar is built for you; leave it out to compose the parts.
number–
page
number–
onPageChange
(page: number) => void–
getPageHrefRenders pages as links instead of buttons.
(page: number) => string–

Every prop is in the Pagination API reference.

More Pagination examples

See them all, with keyboard support and accessibility notes, on the Pagination page.

Related components