Pagination

Page navigation with previous and next controls, numbered links, and an optional ellipsis.

tsx

1import {2  Pagination,3  PaginationContent,4  PaginationEllipsis,5  PaginationItem,6  PaginationLink,7  PaginationNext,8  PaginationPrevious,9} from "@/components/ui/pagination"1011export function Example() {12  return (13    <Pagination>14      <PaginationContent>15        <PaginationItem>16          <PaginationPrevious href="#" />17        </PaginationItem>18        <PaginationItem>19          <PaginationLink href="#">1</PaginationLink>20        </PaginationItem>21        <PaginationItem>22          <PaginationLink href="#" isActive>23            224          </PaginationLink>25        </PaginationItem>26        <PaginationItem>27          <PaginationLink href="#">3</PaginationLink>28        </PaginationItem>29        <PaginationItem>30          <PaginationEllipsis />31        </PaginationItem>32        <PaginationItem>33          <PaginationNext href="#" />34        </PaginationItem>35      </PaginationContent>36    </Pagination>37  )38}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add pagination

Usage

1import {2  Pagination,3  PaginationContent,4  PaginationEllipsis,5  PaginationItem,6  PaginationLink,7  PaginationNext,8  PaginationPrevious,9} from "@/components/ui/pagination"

1<Pagination>2  <PaginationContent>3    <PaginationItem>4      <PaginationPrevious href="#" />5    </PaginationItem>6    <PaginationItem>7      <PaginationLink href="#">1</PaginationLink>8    </PaginationItem>9    <PaginationItem>10      <PaginationLink href="#" isActive>11        212      </PaginationLink>13    </PaginationItem>14    <PaginationItem>15      <PaginationLink href="#">3</PaginationLink>16    </PaginationItem>17    <PaginationItem>18      <PaginationEllipsis />19    </PaginationItem>20    <PaginationItem>21      <PaginationNext href="#" />22    </PaginationItem>23  </PaginationContent>24</Pagination>

Composition

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Basic

The full set: previous, numbered links, an ellipsis, and next.

tsx

1import {2  Pagination,3  PaginationContent,4  PaginationEllipsis,5  PaginationItem,6  PaginationLink,7  PaginationNext,8  PaginationPrevious,9} from "@/components/ui/pagination"1011export function Example() {12  return (13    <Pagination>14      <PaginationContent>15        <PaginationItem>16          <PaginationPrevious href="#" />17        </PaginationItem>18        <PaginationItem>19          <PaginationLink href="#">1</PaginationLink>20        </PaginationItem>21        <PaginationItem>22          <PaginationLink href="#" isActive>23            224          </PaginationLink>25        </PaginationItem>26        <PaginationItem>27          <PaginationLink href="#">3</PaginationLink>28        </PaginationItem>29        <PaginationItem>30          <PaginationEllipsis />31        </PaginationItem>32        <PaginationItem>33          <PaginationNext href="#" />34        </PaginationItem>35      </PaginationContent>36    </Pagination>37  )38}

Simple

Page numbers only — no previous or next.

tsx

1import {2  Pagination,3  PaginationContent,4  PaginationItem,5  PaginationLink,6} from "@/components/ui/pagination"78export function Example() {9  return (10    <Pagination>11      <PaginationContent>12        <PaginationItem>13          <PaginationLink href="#">1</PaginationLink>14        </PaginationItem>15        <PaginationItem>16          <PaginationLink href="#" isActive>17            218          </PaginationLink>19        </PaginationItem>20        <PaginationItem>21          <PaginationLink href="#">3</PaginationLink>22        </PaginationItem>23        <PaginationItem>24          <PaginationLink href="#">4</PaginationLink>25        </PaginationItem>26        <PaginationItem>27          <PaginationLink href="#">5</PaginationLink>28        </PaginationItem>29      </PaginationContent>30    </Pagination>31  )32}

Icons Only

Previous and next controls only. Pair them with a DropdownMenu when people can change the number of rows per page.

Rows per page

tsx

1import { useState } from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuContent,6  DropdownMenuItem,7  DropdownMenuTrigger,8} from "@/components/ui/dropdown-menu"9import {10  Pagination,11  PaginationContent,12  PaginationItem,13  PaginationNext,14  PaginationPrevious,15} from "@/components/ui/pagination"1617export function Example() {18  const [rows, setRows] = useState("25")1920  return (21    <div className="flex w-full items-center justify-between gap-4">22      <div className="flex items-center gap-2">23        <span className="text-sm tracking-wide text-muted-foreground whitespace-nowrap">24          Rows per page25        </span>26        <DropdownMenu>27          <DropdownMenuTrigger28            className={buttonVariants({ variant: "outline", className: "w-[4.5rem]" })}29          >30            {rows}31            <ChevronDownIcon />32          </DropdownMenuTrigger>33          <DropdownMenuContent align="start">34            {(["10", "25", "50", "100"] as const).map((value) => (35              <DropdownMenuItem key={value} onClick={() => setRows(value)}>36                {value}37              </DropdownMenuItem>38            ))}39          </DropdownMenuContent>40        </DropdownMenu>41      </div>42      <Pagination className="mx-0 w-auto">43        <PaginationContent>44          <PaginationItem>45            <PaginationPrevious href="#" />46          </PaginationItem>47          <PaginationItem>48            <PaginationNext href="#" />49          </PaginationItem>50        </PaginationContent>51      </Pagination>52    </div>53  )54}5556function ChevronDownIcon() {57  return (58    <svg59      xmlns="http://www.w3.org/2000/svg"60      viewBox="0 0 24 24"61      fill="none"62      stroke="currentColor"63      strokeWidth="2"64      strokeLinecap="round"65      strokeLinejoin="round"66      aria-hidden67      className="size-4"68      data-icon="inline-end"69    >70      <path d="m6 9 6 6 6-6" />71    </svg>72  )73}

API Reference

Renders the root <nav> with aria-label="pagination".

Prop	Type	Default
className	string	—

1<Pagination>2  <PaginationContent>3    <PaginationItem>4      <PaginationPrevious href="#" />5    </PaginationItem>6    <PaginationItem>7      <PaginationLink href="#" isActive>8        19      </PaginationLink>10    </PaginationItem>11    <PaginationItem>12      <PaginationNext href="#" />13    </PaginationItem>14  </PaginationContent>15</Pagination>

PaginationContent

Prop	Type	Default
className	string	—

1<PaginationContent>2  <PaginationItem>...</PaginationItem>3</PaginationContent>

PaginationItem

Prop	Type	Default
className	string	—

1<PaginationItem>2  <PaginationLink href="#">1</PaginationLink>3</PaginationItem>

PaginationLink

Renders an <a>. Active page matches outline Toggle pressed (border + accent fill, data-state="on") and aria-current="page".

Prop	Type	Default
href	string	—
isActive	boolean	—
size	"default" \| "icon" \| "sm" \| "lg" \| "xs" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"icon"
className	string	—

1<PaginationLink href="#" isActive>2  13</PaginationLink>

PaginationPrevious

Label text is hidden below the sm breakpoint. Pass text to localize.

Prop	Type	Default
href	string	—
text	string	"Previous"
className	string	—

1<PaginationPrevious href="#" />

PaginationNext

Label text is hidden below the sm breakpoint. Pass text to localize.

Prop	Type	Default
href	string	—
text	string	"Next"
className	string	—

1<PaginationNext href="#" />

PaginationEllipsis

Prop	Type	Default
className	string	—

1<PaginationEllipsis />