Pagination

Composable page navigation with previous, next, page links, and ellipsis.

Overview

Pagination is a UI primitive for paging lists and tables. It provides accessible structure and Button-aligned styling — not a page-state engine. Pass href for link-based navigation, or omit it and handle onClick in your application.

On narrow viewports, Previous and Next keep an accessible name while the visible label collapses to an icon so controls stay usable without horizontal overflow. Pair with galleries, lists, tables, or Data Table.

Install with vinyaas add pagination or via vinyaas add --catalog dashboard / --catalog navigation.

Preview

Page 1 of 5

Customize

Disabled

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add pagination

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

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

Examples

Basic

A short page sequence with previous and next links.

Dashboard

Controlled pagination for an application list. Omit href and manage page state yourself.

Invoices

Showing page 1 of 8

1–10

Long range

Use ellipsis when the full page range would overflow.

In practice

Compose Pagination under a product gallery. Keep page state in the parent — this primitive only provides structure and styling.

Speedcross 6

Trail · $140

Ghost 16

Road · $140

Lone Peak 8

Trail · $155

Aero Glide 2

Road · $160

Page 1 of 2

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`aria-label`	string	`"Pagination"`	Pagination: accessible name for the navigation landmark. Override when multiple paginations share a page.
`href`	string	—	PaginationLink / Previous / Next: render an anchor. Omit href to render a button for controlled apps.
`isActive`	boolean	`false`	PaginationLink: marks the current page with aria-current="page" and the outline variant.
`disabled`	boolean	`false`	Previous / Next / Link: disables interaction. Buttons use the native disabled attribute; anchors keep href with aria-disabled, tabIndex={-1}, and prevented activation.
`size`	Button size tokens	`icon (Link) / default (Previous, Next)`	Uses the shared Button size scale via buttonVariants.
`className`	string	—	Merged onto the part with cn.

Accessibility

The root renders nav with aria-label="Pagination". The active page sets aria-current="page". Previous and Next expose explicit labels (Go to previous page / Go to next page); chevrons are decorative.

Disabled controls are not activatable. Focus uses the shared Button focus-visible ring. Tab order follows document order — there is no focus trap.