Pagination

Installation

$ npx shadcn@latest add https://goodui.dev/r/pagination.json

The file lands in components/goodui/pagination.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/pagination works too.

Usage

import * as React from "react"
import { Pagination } from "@/components/goodui/pagination"

export function InvoicesFooter({ total }: { total: number }) {
  const [page, setPage] = React.useState(1)
  const [pageSize, setPageSize] = React.useState(25)

  return (
    <Pagination
      aria-label="Invoices pages"
      page={page}
      onPageChange={setPage}
      totalItems={total}
      pageSize={pageSize}
      onPageSizeChange={setPageSize}
      pageSizeOptions={[25, 50, 100]}
      showInfo
      showPageSize
      showLabels
    />
  )
}

When to use

Examples

<Pagination variant="minimal" totalPages={12} defaultPage={3} showJump size="sm" />

<Pagination variant="dots" totalPages={slides.length} page={slide} onPageChange={setSlide} aria-label="Testimonials" />

<Pagination
  totalItems={248}
  showInfo
  labels={{
    previousPage: "Vorherige Seite",
    nextPage: "Nächste Seite",
    goToPage: (p) => `Seite ${p}`,
    range: (from, to, total) => `${from}–${to} von ${total}`,
  }}
/>

API reference

Accessibility

• •A <nav> with aria-label "Pagination" (override with aria-label, recommended when a page has more than one).
• •The current page button has aria-current="page" ("true" on dots). Every button has a name: "Page 4", "Next page", "Forward 3 pages", "Slide 2 of 5", all in labels.
• •Under dir="rtl" the previous/next, first/last and skip icons are mirrored so they point the way the page list reads.
• •Disabled arrows on the first and last page are real disabled buttons.
• •The "21–30 of 248" text and the minimal "Page 3 of 12" sit in aria-live="polite" regions, so page changes are announced.
• •The rows select is a native <select> inside a <label>; the jump field is a numeric input with aria-label "Go to page".

Motion

• •slide (default): the active marker glides to the new page as a shared layout element on a spring (stiffness 520, damping 40); on dots, the wide active dot travels and the window shifts.
• •press: buttons shrink to 0.9 while pressed (neo pushes into its shadow). Colors change in 150 ms.
• •The "…" buttons swap to a double arrow on hover or focus, showing they skip several pages.
• •Reduced motion: the marker jumps, transitions are off and there is no press effect.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related