# Pagination

> Numbered page links with previous/next and an ellipsis.

## Facts

- **Product**: Max
- **Family**: Navigation
- **Global**: `window.DigitalCrew.Pagination`
- **Source**: `max-agent: src/components/ui/pagination.tsx`
- **Import in the app**: `import { Pagination } from "@/components/ui/pagination";`
- **Live preview**: /design/components/pagination/preview.html
- **Page**: /design/components/pagination

## Guidelines

**Use it for** long server-paged lists where position matters. Data tables in Max use their own compact pagination (32px buttons and a rows-per-page select of 10–50).

**What you provide**: `PaginationContent` with `PaginationItem`s holding `PaginationPrevious`, `PaginationLink` (`isActive` on the current page, `href` for each), `PaginationEllipsis` and `PaginationNext`. Show the first, the last and two neighbours of the current page.

## API

```ts
declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): any;
declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): any;
declare function PaginationItem({ ...props }: React.ComponentProps<"li">): any;
type PaginationLinkProps = {
    isActive?: boolean;
} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): any;
declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): any;
declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): any;
declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): any;
export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Pagination, null,
    h(DC.PaginationContent, null,
      h(DC.PaginationItem, null, h(DC.PaginationPrevious, { href: "#" })),
      h(DC.PaginationItem, null, h(DC.PaginationLink, { href: "#" }, "1")),
      h(DC.PaginationItem, null, h(DC.PaginationLink, { href: "#", isActive: true }, "2")),
      h(DC.PaginationItem, null, h(DC.PaginationLink, { href: "#" }, "3")),
      h(DC.PaginationItem, null, h(DC.PaginationEllipsis, null)),
      h(DC.PaginationItem, null, h(DC.PaginationLink, { href: "#" }, "12")),
      h(DC.PaginationItem, null, h(DC.PaginationNext, { href: "#" }))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Navigation

- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [Header](/design/components/header.md): The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [ListMapToggle](/design/components/list-map-toggle.md): A two-button segmented switch between a List view and a Map view.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.