Component

Pagination

Use actual URLs for each page. Data fetching and total-page calculations belong to the application.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add pagination

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Pagination, PaginationList, PaginationItem, PaginationLink } from '@nimjs/ui';

export function Example() {
  return (
    <Pagination><PaginationList><PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="?page=2" isCurrent>2</PaginationLink></PaginationItem></PaginationList></Pagination>
  );
}

System metadata

Registry

pagination

Category: navigation

Status: preview

Version marker: 0.0.0 (unreleased)

Files

pagination.tsx

Tokens

foregroundmutedringsecondaryradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Pagination

Pagination part of the pagination component.

PaginationList

PaginationList part of the pagination component.

PaginationItem

PaginationItem part of the pagination component.

PaginationLink

PaginationLink part of the pagination component.

Usage patterns

basic use

Supply real page URLs and mark the current page.

API and states

Use actual URLs for each page. Data fetching and total-page calculations belong to the application.

Accessibility

A named nav contains links. Set isCurrent on exactly one page and keep link labels understandable.