104Get started
HextaUI

Pagination: Compact

When the bar doesn't fit its container, it switches to Previous, “Page 4 of 24” and Next, and switches back when there's room. The label is a jump field too. Force either layout with compact.

"use client"

import * as React from "react"

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

export function PaginationCompact() {
  const [page, setPage] = React.useState(4)

  return (
    <div className="w-full max-w-72 rounded-xl border p-2">
      <Pagination page={page} count={24} onPageChange={setPage} />
    </div>
  )
}

Add this example

This adds the example as components/examples/pagination/compact.tsx, together with the Pagination component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Pagination installation.

Props in this example

The Pagination props this example sets, from the API reference.

Pagination

PropTypeDefault
countTotal pages. When set, the bar is built for you; leave it out to compose the parts.
number–
page
number–
onPageChange
(page: number) => void–

Every prop is in the Pagination API reference.

More Pagination examples

See them all, with keyboard support and accessibility notes, on the Pagination page.

Related components