# Shadcn Pagination

> Open-source shadcn pagination components for table pagination, search results, and content archives.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/pagination
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/pagination.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/pagination.md
- MCP: `get_component("pagination")`, then `get_examples("pagination")`
- Examples: 15

## When to use

- Numbered page links between previous and next controls under a list, a table or search results
- Compact pagers of back and forward controls alone or beside a page count, for narrow spaces
- Table footers pairing page controls with a rows per page select, a range count or a page jump field

## When not to use

- A records table that sorts and filters its rows and needs its pager built in: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A whole table section with a title, toolbar, rows and a working pager: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Page controls kept in local state that run click handlers, with no URL per page: use [Button Group](https://web.dev.reui.io/components/button-group.md) (`get_component("button-group")`)

## Agent notes

- `PaginationLink` renders its own anchor and takes neither `render` nor `asChild`; swap that anchor for your router link in your copy of the component
- Every `href` is a hash placeholder and each page number, count and current page is typed in; derive them from your page state or URL

## Examples

- [Basic](https://web.dev.reui.io/components/pagination/c-pagination-1.md): Basic pagination.. Best for the stock pattern: labeled Previous and Next around 3 page links, with page 2 outlined as current.
- [No Labels](https://web.dev.reui.io/components/pagination/c-pagination-2.md): Pagination without labels.. Best for chevron only arrows with aria labels and no Previous or Next text, around 3 numbers with page 2 current.
- [Hover Border](https://web.dev.reui.io/components/pagination/c-pagination-3.md): Pagination with hover effect.. Best for labeled Previous and Next around 3 pages whose idle numbers draw a border on hover, like the outlined current page.
- [Circle Buttons](https://web.dev.reui.io/components/pagination/c-pagination-4.md): Pagination with circle buttons.. Best for fully round page buttons and pill shaped Previous and Next, with page 2 outlined as current.
- [Compact Go-To](https://web.dev.reui.io/components/pagination/c-pagination-5.md): Pagination with go-to-page input. Best for a 320px row fitting chevrons, pages 1 to 3 and an ellipsis beside a small Go to page number field.
- [In Card](https://web.dev.reui.io/components/pagination/c-pagination-6.md): Numbered pagination in card. Best for a padded Card holding round chevrons, pages 1 to 3, an ellipsis, then 10 to 12, with page 1 filled in primary.
- [Arrow Links](https://web.dev.reui.io/components/pagination/c-pagination-7.md): Pagination with arrows buttons. Best for two text links with straight arrow icons pushed to opposite ends of a narrow row, and no page numbers at all.
- [Centered Page Info](https://web.dev.reui.io/components/pagination/c-pagination-8.md): Pagination with page info on center. Best for chevron arrows at both ends of a 320px row with a centered Page 1 of 10 count between them.
- [Left Page Info](https://web.dev.reui.io/components/pagination/c-pagination-9.md): Pagination with page info on left. Best for a Page 1 of 10 count on the left, with labeled Previous and Next grouped together on the right.
- [Trailing Ellipsis](https://web.dev.reui.io/components/pagination/c-pagination-10.md): Pagination with ellipsis indicator. Best for labeled arrows around pages 1 to 4 and a trailing ellipsis, with no last page link after it.
- [Outline Strip](https://web.dev.reui.io/components/pagination/c-pagination-11.md): Pagination with outline style buttons. Best for one bordered strip of joined square cells split by dividers, with a muted fill on the current page.
- [Rows Per Page](https://web.dev.reui.io/components/pagination/c-pagination-12.md): Rows per page select with range info and first/prev/next/last icons. Best for a footer with no page numbers: a rows per page select on the left, and a 1-25 of 100 range with 4 jump icons on the right.
- [Page Select](https://web.dev.reui.io/components/pagination/c-pagination-13.md): Pagination with page select dropdown and first/last navigation. Best for a Page 1 to Page 10 dropdown flanked by first, previous, next and last icon links, with no numbered links.
- [Full Width Go-To](https://web.dev.reui.io/components/pagination/c-pagination-14.md): Numbered pagination with go-to-page input. Best for chevrons and pages 1 to 4 on the left of a full width row, with the page number field at the far right.
- [Info & Per-Page](https://web.dev.reui.io/components/pagination/c-pagination-15.md): Pagination with page info, numbered pages, ellipsis, and per-page select. Best for a 3 part footer: a Page 1 of 10 count, labeled arrows around pages 1 to 4 and a per page select.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.