> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pagination

> Pagination component with default and minimal variants

export const PaginationCustomLabelPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/PaginationCustomLabel" frameBorder="0" width="100%" height="260"></iframe>;

export const PaginationMinimalPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/PaginationMinimal" frameBorder="0" width="100%" height="260"></iframe>;

export const PaginationBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/PaginationBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Pagination component provides page navigation with two variants: default card style and minimal style.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PaginationCardDefault } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

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

      return (
        <PaginationCardDefault
          page={page}
          totalPages={10}
          onPageChange={setPage}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <PaginationBasicPreview />
  </Tab>
</Tabs>

## Minimal Variant

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

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

      return (
        <PaginationCardMinimal
          page={page}
          totalPages={10}
          onPageChange={setPage}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <PaginationMinimalPreview />
  </Tab>
</Tabs>

## With Custom Label

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

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

      return (
        <PaginationCardMinimal
          page={page}
          totalPages={10}
          onPageChange={setPage}
          labelFormatter={(page, total) => `${page} / ${total}`}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <PaginationCustomLabelPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop         | Type                     | Default | Description                     |
  | :----------- | :----------------------- | :------ | :------------------------------ |
  | page         | `number`                 | -       | Current page number             |
  | totalPages   | `number`                 | `10`    | Total number of pages           |
  | onPageChange | `(page: number) => void` | -       | Page change handler             |
  | siblingCount | `number`                 | `1`     | Number of sibling pages to show |
  | className    | `string`                 | -       | Additional CSS classes          |
</PropsTable>

### PaginationCardMinimal Props

<PropsTable>
  | Prop           | Type                                                    | Default  | Description            |
  | :------------- | :------------------------------------------------------ | :------- | :--------------------- |
  | align          | `"left" \| "center" \| "right"`                         | `"left"` | Alignment              |
  | showPageLabel  | `boolean`                                               | `true`   | Show page label        |
  | labelFormatter | `(page: number, totalPages: number) => React.ReactNode` | -        | Custom label formatter |
</PropsTable>