# 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`.

Example: https://hextaui.com/docs/pagination/examples/compact
Component docs: https://hextaui.com/docs/pagination.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/pagination-compact.json
```

This adds `components/examples/pagination/compact.tsx` with the Pagination component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/pagination/compact.tsx"
"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>
  )
}
```

## Props in this example

### Pagination

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | – | Total pages. When set, the bar is built for you; leave it out to compose the parts. |
| `page` | `number` | – |  |
| `onPageChange` | `(page: number) => void` | – |  |

## More Pagination examples

- [Jump to a page](https://hextaui.com/docs/pagination/examples/long.md)
- [Links](https://hextaui.com/docs/pagination/examples/links.md)
- [Composable](https://hextaui.com/docs/pagination/examples/composable.md)
- [Right to left](https://hextaui.com/docs/pagination/examples/rtl.md)