Pagination

The Pagination component provides you with page navigation and pagination.

Live Examples

Live Example

☀️

Copy

View Code

import { Pagination } from '@jarllyng/nostromo' export default function PaginationExample() { const [currentPage, setCurrentPage] = React.useState(1) return ( <Pagination currentPage={currentPage} totalPages={10} onPageChange={setCurrentPage}...

Import


import { Pagination } from "@jarllyng/nostromo";
// or
import { Pagination } from "@jarllyng/nostromo/pagination";

Usage


import { Pagination } from "@jarllyng/nostromo";
 
export default function Example() {
  const [currentPage, setCurrentPage] = React.useState(1);
 
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
    />
  );
}

Props

Prop	Type	Default	Required	Description
`currentPage`	`number`	-	Yes	Current active page (1-indexed)
`totalPages`	`number`	-	Yes	Total number of pages
`onPageChange`	`(page: number) => void`	-	Yes	Callback when page changes
`showFirstLast`	`boolean`	`true`	No	Whether to show first/last page buttons
`showPrevNext`	`boolean`	`true`	No	Whether to show previous/next buttons
`maxVisiblePages`	`number`	`5`	No	Maximum number of visible page buttons
`disabled`	`boolean`	`false`	No	Whether pagination is disabled
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of pagination buttons
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Props

The Pagination component extends React.HTMLAttributes<HTMLElement>, so it accepts all standard HTML attributes (e.g., id, data-*, aria-*).