Pagination

free

Pagination divides content into pages and lets users move between them.

import Pagination from '@/components/ui/pagination';

export default function UsageDemo() {
  const onPaginationChange = (page: number) => {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Pagination

pnpm dlx nateui@latest add Pagination

yarn dlx nateui@latest add Pagination

import Pagination from '@/components/ui/pagination';

export default function BasicDemo() {
  const onPaginationChange = (page: number) => {

import Pagination from '@/components/ui/pagination';

export default function MoreDemo() {
  return (

Total 50 Items

import Pagination from '@/components/ui/pagination';

export default function TotalDemo() {
  return (

Total 100 Items

import { useState } from 'react';
import Pagination from '@/components/ui/pagination';
import Select from '@/components/ui/select';

import { useState } from 'react';
import Pagination from '@/components/ui/pagination';

export default function ControlledDemo() {

Pagination renders page controls from total and pageSize, then reports the selected page through onChange.

Prop	Description	Type	Default
`currentPage`	Current page number.	`number`	`1`
`displayTotal`	Whether to display the total number of data items.	`boolean`	`false`
`onChange`	Callback when a pagination index is clicked.	`(pageNumber: number) => void`	-
`pageSize`	Number of data items per page.	`number`	`1`
`total`	Total number of data items.	`number`	`5`