Accessible navigation landmark for paginated lists, data tables, and search results.

Pagination

The Pagination component enables users to navigate across large datasets divided into multiple pages. It features automatic sibling truncation ellipses, rows-per-page selection dropdowns, total summary counts, and complete ARIA landmark semantics.

Preview

Interactive

Properties

Total Pages

Variant

Size

Shape

Show Summary Counter

Show Page Size Selector

Show First / Last Buttons

Show Prev / Next Buttons

Live Code Snippet

import { Pagination } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  return (
    <Pagination
      page={page}
      onChange={setPage}
      pageSize={pageSize}
      onPageSizeChange={setPageSize} totalPages={10} showSummary showPageSize showFirstLast
    />
  );
}

Import

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationFirst,
  PaginationLast,
  PaginationEllipsis,
  PaginationSummary,
  PaginationPageSize,
} from '@moul-dev/ui';

Interactive Table Demo

ID	Name	Role	Status
21	User 21	Editor	Inactive
22	User 22	Admin	Active
23	User 23	Editor	Active
24	User 24	Viewer	Active
25	User 25	Admin	Inactive
26	User 26	Viewer	Active
27	User 27	Editor	Active
28	User 28	Admin	Active
29	User 29	Editor	Inactive
30	User 30	Viewer	Active

Basic Usage

Pass page, totalPages, and onChange for standard controlled pagination:

import { Pagination } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      page={page}
      totalPages={10}
      onChange={setPage}
    />
  );
}

With Summary and Page Size Selector

Enable showSummary and showPageSize to provide complete data table navigation:

import { Pagination } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  return (
    <Pagination
      page={page}
      total={250}
      pageSize={pageSize}
      showSummary
      showPageSize
      showFirstLast
      showPrevNext
      onChange={setPage}
      onPageSizeChange={setPageSize}
    />
  );
}

Shapes & Variants

Choose between rounded, circle, or square button shapes, and outline, ghost, primary, or subtle styles:

<Pagination page={4} totalPages={8} variant="outline" shape="rounded" />
<Pagination page={4} totalPages={8} variant="subtle" shape="circle" />
<Pagination page={4} totalPages={8} variant="ghost" shape="square" />

Compound Composition

You can build custom layouts by composing subcomponents inside <Pagination>:

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
  PaginationSummary,
} from '@moul-dev/ui';

export default function CustomPagination() {
  return (
    <Pagination page={3} totalPages={10}>
      <PaginationSummary>Page 3 of 10</PaginationSummary>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink page={1} />
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink page={3} isActive />
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink page={10} />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API Reference

Prop

Type

Pagination

Properties

On this page