Pagination

Navigate between pages of content.

import { Pagination } from "@ninna-ui/navigation"

pnpm add @ninna-ui/navigation

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Pagination component in your application.

import { Pagination } from "@ninna-ui/navigation";

export default function Example() {
  return (
    <Pagination>
      <Pagination.Content>
        <Pagination.Item><Pagination.Previous /></Pagination.Item>
        <Pagination.Item><Pagination.Link isActive>1</Pagination.Link></Pagination.Item>
        <Pagination.Item><Pagination.Link>2</Pagination.Link></Pagination.Item>
        <Pagination.Item><Pagination.Link>3</Pagination.Link></Pagination.Item>
        <Pagination.Item><Pagination.Next /></Pagination.Item>
      </Pagination.Content>
    </Pagination>
  );
}

Basic

A basic pagination with previous, pages, and next.

Sizes

Pagination comes in sm, md, and lg sizes.

Size: sm

Size: md

Size: lg

With Ellipsis

Use ellipsis to indicate truncated page ranges.

API Reference

Complete list of props for the Pagination component and its sub-components.

Pagination (Root)

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the pagination
`className`	`string`	-	Additional CSS classes

Pagination.Link

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this is the active/current page
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

Accessibility

Uses nav with aria-label="Pagination"
Active page uses aria-current="page"
Previous/Next buttons have customizable aria-label (overridable via props spread)
All page links are keyboard focusable
Ellipsis is decorative and hidden from screen readers