Pagination

A navigation component for paginated content. Uses semantic HTML (<nav>, <ul>, <li>) with aria-label="Pagination". Unstyled structure — consumers provide page range logic.

Import


import { Pagination } from "chunks-ui";

Basic Usage


<Pagination.Root>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous href="?page=1" />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="?page=1">1</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="?page=2" active>2</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="?page=3">3</Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next href="?page=3" />
    </Pagination.Item>
  </Pagination.Content>
</Pagination.Root>

With Ellipsis

Use Pagination.Ellipsis for large page ranges:


<Pagination.Item>
  <Pagination.Ellipsis />
</Pagination.Item>

Custom Link Component

Use the render prop on Link, Previous, and Next to render framework-specific links:


<Pagination.Link render={<Link to="?page=2" />} active>2</Pagination.Link>
<Pagination.Previous render={<Link to="?page=1" />} />

Compound Parts

Part	Description
`Pagination.Root`	`<nav>` wrapper named “Pagination”. Takes `labels` for the parts’ built-in text.
`Pagination.Content`	`<ul>` containing page items.
`Pagination.Item`	`<li>` wrapping a link, ellipsis, or nav button.
`Pagination.Link`	Page number link. `active` sets `aria-current="page"`.
`Pagination.Previous`	Previous page button with chevron icon.
`Pagination.Next`	Next page button with chevron icon.
`Pagination.Ellipsis`	Collapsed page range indicator. Children you pass replace the dots; screen readers read them and the hidden label (`labels.ellipsis`), so give a decorative icon `aria-hidden`.

Pagination.Root Props

Name	Type	Default
`labels`	`Partial<PaginationLabels>` Replaces the built-in English strings, e.g. to translate them. Keys you leave out keep the default from `DEFAULT_PAGINATION_LABELS`. `aria-label` on Root and `children` on Previous and Next take precedence.

All other props are forwarded to the underlying <nav> element.

Pagination.Link Props

Name	Type	Default
`active`	`boolean` Marks this link as the current page, setting `aria-current="page"`.	`false`
`render`	`RenderElement` Custom React element to render instead of the default `<a>` tag.

All other props are forwarded to the underlying <a> element.

Pagination.Previous / Pagination.Next Props

Name	Type	Default
`render`	`RenderElement` Custom React element to render instead of the default `<a>` tag.

All other props are forwarded to the underlying <a> element.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_PAGINATION_LABELS. aria-label on Pagination.Root and children on Pagination.Previous and Pagination.Next take precedence. See Labels.

Name	Type	Default
`root`	`string` Name of the `Pagination.Root` navigation landmark.	`"Pagination"`
`previous`	`string` Text of `Pagination.Previous` when it has no children.	`"Previous"`
`next`	`string` Text of `Pagination.Next` when it has no children.	`"Next"`
`ellipsis`	`string` Screen-reader text of `Pagination.Ellipsis`.	`"More pages"`