ComponentsInertia Pagination

Inertia Pagination

A high-performance pagination component optimized for Laravel and Inertia.js responses.

React

Inertia.js

Preview

Interact with the live pagination component below to see how it handles active states and ellipsis.

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/inertia/inertia-pagination.json

Usage

Integrating the paginator is straightforward. Simply pass the links object from your controller.

import { Link } from "@inertiajs/react"
import { InertiaPagination } from "@/components/inertia/inertia-pagination"

export default function Page({ users }) {
  return (
    <InertiaPagination 
      links={users.links} 
      LinkComponent={Link} 
    />
  )
}

API Reference

Configure the component using the following properties.

Prop	Type	Default	Description
links	Array<{ url: string \| null, label: string, active: boolean }>	[]	The links array directly from the Laravel/Inertia paginator response.
LinkComponent	React.ComponentType	a	The Link component to use (e.g., Inertia's Link for SPA navigation).
size	'default' \| 'sm' \| 'lg' \| 'icon'	'default'	The size of the pagination buttons.

PreviousTable Toolbar