Navigationreadycomponentready

Pagination

A semantic pagination nav with list structure, active page state, previous and next links, ellipsis text, and tokenized link styling.

Importimport { Pagination, PaginationContent, PaginationItem, PaginationLink } from 'radcn/pagination'

Preview

Live package example

Render the upstream previous, 1, active 2, 3, ellipsis, and next sequence with native links and exact accessibility labels.

Pagination Demo

Render the upstream previous, 1, active 2, 3, ellipsis, and next sequence with native links and exact accessibility labels.

Preview

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from 'radcn/pagination'

export function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Pagination, PaginationContent, PaginationItem, PaginationLink } from 'radcn/pagination'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Pagination renders a navigation landmark with aria-label="pagination" and a real list of page controls.
Previous and next are native links with accessible labels: Go to previous page and Go to next page.
The active page link renders aria-current="page", matching the upstream isActive behavior without React state.
PaginationEllipsis keeps a decorative visible/icon affordance and exposes screen-reader text More pages.

Customization

Root, content, item, link, previous, next, icon, text, and ellipsis parts expose public data-radcn-pagination hooks and package classes.
buttonVariants and Button size typing map to radcn-pagination-link classes, active-state classes, and tokenized package CSS.
className maps to class, cn maps to explicit class composition, and data-slot maps to public data-radcn-pagination* hooks.
Custom labels, route-local hrefs, classes, styles, and CSS variables remain app-owned without changing the package API.

Remix 3 Notes

React component props map to explicit Remix UI props and server-rendered native nav/list/link markup.
lucide ChevronLeftIcon, ChevronRightIcon, and MoreHorizontalIcon map to RadCN-owned icon affordance hooks, not lucide-react dependencies.
Tailwind mx-auto, flex, gap, size, px, hidden sm:block, ghost, outline, and active utilities map to package CSS, classes, CSS variables, and app-owned responsive styles.
The named docs demo uses upstream href="#" values; fixture routes may use route-local hrefs as an app-owned routing divergence while preserving link semantics.
Vendor source remains read-only evidence and is not imported by RadCN.