Pagination

Page navigation. Free, MIT · Navigation and layout › Switching

Installation

npx valyro-cli@latest add pagination

npx shadcn@latest add https://valyro.xyz/r/pagination.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Pagination } from 'valyro-ui';

Prop	Type	Default
`pageCount` *	`number`		Total number of pages; non-finite or lower values count as 1.
`value`	`number`		Current page, 1-based.
`defaultValue`	`number`	`1`	Initial `value` when uncontrolled.
`onValueChange`	`(page: number) => void`		Called with the new `value` when it changes.
`siblings`	`number`	`1`	Page buttons shown on each side of the current page before an ellipsis.
`boundaries`	`number`	`1`	Page buttons always shown at the start and at the end.
`variant`	`'default' \| 'compact'`	`'default'`	`compact` shows "Page 3 of 10" between the arrows instead of page numbers.
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Height of the page buttons: 32 / 40 / 48px, like the other controls' sm / md / lg.
`labels`	`Partial<PaginationLabels>`		Overrides for the built-in English strings.
`locale`	`string`		Locale for page numbers (default: the ThemeProvider's, then the browser's).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the current-page cursor springs to the chosen page with a slight overshoot. `default`: the theme's curve.

Tabs — Tabs
Segmented Control — Mode switcher
Stepper — Step-by-step progress
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode