--- title: Pagination description: Previous, next, and numbered page controls. group: Components order: 51 --- Page navigation with previous and next controls, numbered links, and an optional ellipsis. ```tsx import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" export function Example() { return ( 1 2 3 ) } ``` ## Installation ```bash npx @arctis-sh/@arctis-sh/ui@latest add pagination ``` ## Usage ```tsx import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" ``` ```tsx 1 2 3 ``` ## Composition ```tree Pagination └── PaginationContent ├── PaginationItem │ └── PaginationPrevious ├── PaginationItem │ └── PaginationLink ├── PaginationItem │ └── PaginationEllipsis └── PaginationItem └── PaginationNext ``` ## Basic The full set: previous, numbered links, an ellipsis, and next. ```tsx import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" export function Example() { return ( 1 2 3 ) } ``` ## Simple Page numbers only — no previous or next. ```tsx import { Pagination, PaginationContent, PaginationItem, PaginationLink, } from "@/components/ui/pagination" export function Example() { return ( 1 2 3 4 5 ) } ``` ## Icons Only Previous and next controls only. Pair them with a `DropdownMenu` when people can change the number of rows per page. ```tsx import { useState } from "react" import { buttonVariants } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination" export function Example() { const [rows, setRows] = useState("25") return (

Rows per page {rows} {(["10", "25", "50", "100"] as const).map((value) => ( setRows(value)}> {value} ))}

) } function ChevronDownIcon() { return ( ) } ``` ## API Reference ### Pagination Renders the root `