Pagination

Page navigation with previous/next buttons, numbered pages, ellipsis truncation, and optional first/last shortcuts.

Import

tsx

import { Pagination } from '@velocityuikit/velocityui'

Preview

Basic — page 1 of 10

More siblings — page 6 of 20

No first/last buttons

Props

Prop	Type	Default	Description
page	`number`	—	The currently active page (1-indexed).
totalPages	`number`	—	The total number of pages.
onChange	`(page: number) => void`	—	Callback fired when the user selects a new page.
siblingCount	`number`	`1`	Number of page buttons shown on each side of the current page.
showFirstLast	`boolean`	`true`	Toggles the first-page and last-page shortcut buttons.

Examples

Basic

tsx

import { Pagination } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [page, setPage] = useState(1)
  return <Pagination page={page} totalPages={12} onChange={setPage} />
}

More siblings

tsx

import { Pagination } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [page, setPage] = useState(5)
  return <Pagination page={page} totalPages={20} onChange={setPage} siblingCount={2} />
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */