Thành phần

Pagination

Pagination links: Barlow Condensed numerals, ink fill on the current page, 44px targets, no hover effect.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/pagination

Usage

tsx

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

<Pagination aria-label="Pagination">
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=1" label="Previous" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=1" aria-label="Page 1">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="?page=2" isActive aria-label="Page 2">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis label="More pages" /></PaginationItem>
    <PaginationItem><PaginationNext href="?page=3" label="Next" /></PaginationItem>
  </PaginationContent>
</Pagination>

aria-label on Pagination and label on PaginationPrevious, PaginationNext and PaginationEllipsis are required, so the text is yours to translate. Use render={<Link href="…" />} for your router, and disabled for an unavailable end link.

States

Current page · other page

First page · Previous disabled

State	Treatment
Page	Barlow Condensed numerals, tabular
Current page	Solid ink fill and `aria-current="page"`
Hover	None
Pressed	Ink fill with paper text
Focus	2px ink outline, 2px offset
Disabled	Halftone text, `cursor-not-allowed`, no `href`

Keyboard

Key	Action
Tab / Shift+Tab	Move between the links in order; a disabled link is skipped
Enter	Follow the focused link

Vietnamese

Ink adaptation

Upstream outlines the current page and fixes English Previous and Next text in the component. Here numerals are Barlow Condensed capitals with tabular figures, the current page is a solid ink fill with aria-current, the end links take their text from label, and there is no hover effect. Built on native nav, ul and a; render comes from Base UI useRender.