Pagination

Page navigation with previous/next links and ellipsis gaps.

$ pnpm dlx shadcn@latest add https://dashral.com/r/pagination.json

Page 6 of 20

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/pagination.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/pagination

Usage

example.tsx

1import { useState } from "react"
2import { Pagination } from "@/components/dashral/pagination"
3
4const [page, setPage] = useState(1)
5
6<Pagination page={page} total={12} onPageChange={setPage} />

Examples

Outline

variant="outline": every page in a box, the current one filled.

Pill

variant="pill": the pages in one pill with a sliding highlight.

API reference

Pagination

Also takes every prop of <nav>(opens in a new tab).

Prop	Type	Default
`page / total`	`number` The current page (from 1) and how many there are. Required.	—
`onPageChange`	`(page: number) => void` Buttons that change the page.	—
`hrefPattern`	`string` Links instead: each page's URL with {page} where the number goes, e.g. "?page={page}".	—
`linkAs`	`ElementType` Your router's link, for hrefPattern. From a client component.	`"a"`
`siblings`	`number` Pages on each side of the current one before an ellipsis.	`1`
`showPrevNext`	`boolean` The Previous and Next buttons.	`true`
`compact`	`boolean` Arrows around “Page 2 of 7”, for a narrow card. Phones always get this.	`false`
`variant`	`"default" \| "outline" \| "pill"` Quiet links with an outlined current page; every page boxed with the current one filled; or the pages in one pill.	`"default"`
`className`	`string` Extra classes, merged with cn() so yours win.	—

getPageRange(current, total, siblings?)

The page numbers with "ellipsis" gaps, for a pager of your own.

Accessibility

A nav landmark labelled “Pagination”; the current page has aria-current="page"; previous and next are labelled.

Motion

The current page's outline glides to the page you open (--duration-considered, --ease-standard); numbers that change as the window of pages moves arrive with a soft blur. Both just switch with reduced motion.