Pagination

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/pagination.json

npx shadcn@latest add @interlace/pagination

Import

8 named exports — pull the parts you need.

import { MIN_VIEWPORT, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/ui/pagination';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

Pagination                       (nav — aria-label=pagination, data-min-viewport=320)
    └─ PaginationContent           (ul — flex-wrap)
         └─ PaginationItem         (li)
              ├─ PaginationLink        (a — buttonVariants, active ⇒ outline + aria-current)
              ├─ PaginationPrevious    (a — chevron + label, label hidden below sm)
              ├─ PaginationNext        (a — label + chevron, label hidden below sm)
              └─ PaginationEllipsis    (span — aria-hidden icon + sr-only "More pages")
Links, not buttons: every part renders an `<a>`, so there is no disabled
state. A "previous" on page one has to be omitted by the caller rather than
disabled, and an anchor with no `href` is not keyboard-focusable.
`PaginationLink` also accepts a deprecated `isActive` alias for `active`,
kept only so shadcn-shaped call sites keep working; `active` wins when both
are passed.

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Native element semantics — no interaction layer to get wrong.

Focus ring (WCAG 2.2 SC 2.4.13)

Not focusable — no focus indicator required.

Reduced motion

No animation to gate.

ARIA in the source

• aria-current
• aria-label

Examples

3 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

Native / no Base UI dependency

Lucide icons

• ChevronLeftIcon
• ChevronRightIcon
• MoreHorizontalIcon

NPM dependencies

• class-variance-authority
• lucide-react

Registry dependencies

• @interlace/theme
• @interlace/button
• @interlace/cn

Source

The full implementation — components/ui/pagination.tsx once installed.

import * as React from 'react';

// @interlace/pagination v1.3.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/pagination
// What changed since: https://ds.interlace.tools/c/pagination#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — Pagination
 *
 * The page-navigation bar: a `<nav aria-label="pagination">` of anchor links
 * with previous / next / ellipsis parts. It is presentation only — it computes
 * no page numbers and knows no total.
 *
 * The caller renders the items and marks one with `active`, which emits
 * `aria-current="page"` and the outline face.
 *
 * ## Anatomy
 *
 *   Pagination                       (nav — aria-label=pagination, data-min-viewport=320)

…192 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.