Pagination: HextaUI and shadcn/ui

The HextaUI Pagination keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.

At a glance

Measure	HextaUI	shadcn/ui
Exported parts	7	7
Props the wrapper handles	19	4
Lines of source	742	151
npm dependencies	`@base-ui/react@^1.8.0@tabler/icons-reactcn`	`cn`
Built from	`buttonmotionthemeuse-pagination`	`button`

More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.

Props HextaUI adds

Props the HextaUI wrapper handles itself that the shadcn/ui wrapper does not. Props passed straight through to Base UI or the underlying library are left out, because both versions accept them.

Prop	What it does
`page`Pagination	See the API reference
`defaultPage`Pagination	See the API reference
`siblings`Pagination	Pages shown on each side of the current one.
`boundaries`Pagination	Pages always shown at the start and end.
`getPageHref`Pagination	Renders pages as links instead of buttons.
`jump`Pagination	Lets the ellipsis open a page field.

The HextaUI version

Showing 1–10 of 248 results

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

const perPage = 10
const total = 248

export function PaginationDemo() {
  const [page, setPage] = React.useState(1)
  const first = (page - 1) * perPage + 1
  const last = Math.min(page * perPage, total)

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination
        page={page}
        count={Math.ceil(total / perPage)}
        onPageChange={setPage}
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        Showing {first}–{last} of {total} results
      </p>
    </div>
  )
}

Every state, the keyboard map and the API reference are on the component page.

5 of its examples also have a page of their own.

Switch one component

Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination.json --overwrite

Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.

Pagination: HextaUI and shadcn/ui

At a glance

Props HextaUI adds

The HextaUI version

Switch one component

Other components compared

More comparisons