How do I install the pagination?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

How does the active page animate?

It uses the same shared layoutId technique as the sidebar active-tab highlight.

Is it only color changes?

No. The highlight slides between numbers instead of swapping color.

Pagination

Numbered pages with a shared layoutId pill sliding between the active number — the same technique behind the sidebar's active-tab highlight, applied here instead of a plain color swap.

pnpm dlx shadcn@latest add @ditherui/pagination

Customer	Plan	MRR
Acme Inc.	Pro	$490
Globex	Team	$120
Initech	Pro	$490

Install

$ pnpm dlx shadcn@latest add @ditherui/pagination

Props

PropTypeDefault

pagenumber—

totalPagesnumber—

onPageChange(page: number) => void—

siblingCountnumber1

When to use the pagination

Use pagination for paged lists and tables. A shared layout pill slides between the active page numbers.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

Command Palette
Search for a command to run...
Command MenuA searchable command palette for jumping anywhere.
ComboboxA type-ahead select for long option lists.
Multi SelectPick several options as removable chips.

Pagination

Install

Props

When to use the pagination

Suggested components

Command Palette