---
sidebar_position: 4
---

import Pagination from "@site/src/components/pagination";
import Paper from "@site/src/components/paper";
import {
  ChevronDoubleRightIcon,
  ChevronDoubleLeftIcon,
} from "@heroicons/react/24/outline";

# Rc Pagination

The Pagination component enables the user to select a specific info from a range of infos.

<div className="mb-16" />

## Installation

<hr />

1.  Install the **rc-pagination** package.

<div className="mb-4" />

```bash
npm i rc-pagination
```

<div className="mb-4" />

2. Create a pagination component, **components/pagination.tsx**

<div className="mb-4" />

```ts
import React from "react";
import "rc-pagination/assets/index.css";
import RcPagination, {
  PaginationProps as RcPaginationProps,
} from "rc-pagination";
import { cn } from "rizzui";

const paginationStyles = {
  base: {
    item: "[&>.rc-pagination-item>a]:!no-underline [&>.rc-pagination-item>a]:font-medium [&>li.rc-pagination-item]:border-muted [&>.rc-pagination-item:not(.rc-pagination-item-active)]:bg-transparent",
    icon: "[&>.rc-pagination-prev]:align-baseline [&>.rc-pagination-next]:align-baseline",
    outline:
      "[&>.rc-pagination-item]:leading-7 [&>.rc-pagination-item]:border-0",
    jumperDiv:
      "[&>.rc-pagination-options>.rc-pagination-options-quick-jumper]:text-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper]:text-gray-500",
    jumperInput:
      "[&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:!py-[3px] [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:text-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:border-muted [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:ring-0",
  },
  rounded: {
    none: "[&>.rc-pagination-item]:rounded-none [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-none",
    sm: "[&>.rc-pagination-item]:rounded-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-sm",
    md: "[&>.rc-pagination-item]:rounded-md [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-md",
    lg: "[&>.rc-pagination-item]:rounded-lg [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-lg",
    full: "[&>.rc-pagination-item]:rounded-full [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-full",
  },
  variant: {
    solid: {
      base: "",
      color: {
        primary:
          "[&>.rc-pagination-item-active]:bg-primary [&>.rc-pagination-item-active>a]:!text-primary-foreground [&>li.rc-pagination-item-active]:border-primary [&>.rc-pagination-item-active]:hover:border-primary [&>.rc-pagination-item-active]:focus:border-primary",
        secondary:
          "[&>.rc-pagination-item-active]:bg-secondary [&>.rc-pagination-item-active>a]:!text-secondary-foreground [&>li.rc-pagination-item-active]:border-secondary [&>.rc-pagination-item-active]:hover:border-secondary [&>.rc-pagination-item-active]:focus:border-secondary",
        danger:
          "[&>.rc-pagination-item-active]:bg-red [&>.rc-pagination-item-active>a]:!text-white [&>li.rc-pagination-item-active]:border-red [&>.rc-pagination-item-active]:hover:border-red [&>.rc-pagination-item-active]:focus:border-red",
      },
    },
    flat: {
      base: "",
      color: {
        primary:
          "[&>.rc-pagination-item-active]:bg-primary-lighter [&>li.rc-pagination-item-active]:border-primary-lighter [&>.rc-pagination-item-active>a]:text-primary-dark [&>.rc-pagination-item-active>a]:hover:text-primary-dark [&>.rc-pagination-item-active>a]:focus:text-primary-dark [&>.rc-pagination-item-active]:hover:border-primary-lighter [&>.rc-pagination-item-active]:focus:border-primary-lighter",
        secondary:
          "[&>.rc-pagination-item-active]:bg-secondary-lighter [&>li.rc-pagination-item-active]:border-secondary-lighter [&>.rc-pagination-item-active>a]:text-secondary-dark [&>.rc-pagination-item-active>a]:hover:text-secondary-dark [&>.rc-pagination-item-active>a]:focus:text-secondary-dark [&>.rc-pagination-item-active]:hover:border-secondary-lighter [&>.rc-pagination-item-active]:focus:border-secondary-lighter",
        danger:
          "[&>.rc-pagination-item-active]:bg-red-lighter [&>li.rc-pagination-item-active]:border-red-lighter [&>.rc-pagination-item-active>a]:text-red-dark [&>.rc-pagination-item-active>a]:hover:text-red-dark [&>.rc-pagination-item-active>a]:focus:text-red-dark [&>.rc-pagination-item-active]:hover:border-red-lighter [&>.rc-pagination-item-active]:focus:border-red-lighter",
      },
    },
  },
};

const iconStyles = {
  base: "text-foreground",
  outline: "border border-muted p-[5px]",
  center: "inline-block align-middle",
  rounded: {
    none: "rounded-none",
    sm: "rounded-sm",
    md: "rounded-md",
    lg: "rounded-lg",
    full: "rounded-full",
  },
};

type IconProps = {
  icon: React.ReactNode;
  rounded: keyof typeof iconStyles.rounded;
  outline: boolean;
  className: string;
};

const PrevIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      className
    )}
  >
    {icon || (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={2}
        stroke="currentColor"
        className="m-auto h-4 w-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 19.5L8.25 12l7.5-7.5"
        />
      </svg>
    )}
  </div>
);

const NextIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      className
    )}
  >
    {icon || (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={2}
        stroke="currentColor"
        className="m-auto h-4 w-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M8.25 4.5l7.5 7.5-7.5 7.5"
        />
      </svg>
    )}
  </div>
);

const JumpPrevIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      !icon && outline && "py-0 leading-[26px]",
      className
    )}
  >
    {icon || "•••"}
  </div>
);

const JumpNextIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      !icon && outline && "py-0 leading-[26px]",
      className
    )}
  >
    {icon || "•••"}
  </div>
);

export const localeDefault = {
  items_per_page: "/ page",
  jump_to: "Go to",
  jump_to_confirm: "confirm",
  page: "Page",
  prev_page: "Previous Page",
  next_page: "Next Page",
  prev_5: "Previous 5 Pages",
  next_5: "Next 5 Pages",
  prev_3: "Previous 3 Pages",
  next_3: "Next 3 Pages",
  page_size: "Page Size",
};

export interface PaginationProps extends RcPaginationProps {
  outline?: boolean;
  rounded?: keyof typeof paginationStyles.rounded;
  variant?: keyof typeof paginationStyles.variant;
  color?: keyof typeof paginationStyles.variant.flat.color;
  prevIconClassName?: string;
  nextIconClassName?: string;
  jumpPrevIconClassName?: string;
  jumpNextIconClassName?: string;
}

export default function Pagination({
  outline = false,
  rounded = "md",
  variant = "solid",
  color = "primary",
  locale,
  nextIcon,
  prevIcon,
  prevIconClassName,
  nextIconClassName,
  jumpPrevIcon,
  jumpNextIcon,
  jumpPrevIconClassName,
  jumpNextIconClassName,
  className,
  ...props
}: PaginationProps) {
  return (
    <RcPagination
      locale={locale || localeDefault}
      nextIcon={
        <NextIcon
          icon={nextIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={nextIconClassName as string}
        />
      }
      prevIcon={
        <PrevIcon
          icon={prevIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={prevIconClassName as string}
        />
      }
      jumpPrevIcon={
        <JumpPrevIcon
          icon={jumpPrevIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={jumpPrevIconClassName as string}
        />
      }
      jumpNextIcon={
        <JumpNextIcon
          icon={jumpNextIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={jumpNextIconClassName as string}
        />
      }
      className={cn(
        paginationStyles.base.item,
        paginationStyles.base.jumperDiv,
        paginationStyles.base.jumperInput,
        !outline && paginationStyles.base.outline,
        !outline && paginationStyles.base.icon,
        paginationStyles.rounded[rounded],
        paginationStyles.variant[variant].base,
        paginationStyles.variant[variant].color[color],
        className
      )}
      {...props}
    />
  );
}

Pagination.displayName = "Pagination";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Pagination**.

<Paper>
  <Pagination total={25} defaultCurrent={1} className="[&_li]:!mt-0" />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} defaultCurrent={1} />;
}
```

<div className="mb-16" />

## Variants

You can change the style of **Pagination** using **variant** property.

<Paper className="flex-row flex-wrap justify-between">
  <Pagination
    total={25}
    variant="solid"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
  <Pagination
    total={25}
    variant="flat"
    defaultCurrent={1}
    className="[&_li]:!mt-0 [&_li>a]:!text-gray-950"
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} variant="solid" defaultCurrent={1} />
      <Pagination total={25} variant="flat" defaultCurrent={1} />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Pagination** button / item using [**rounded**](#pagination-rounded) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-8">
  <Pagination
    total={25}
    rounded="sm"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
  <Pagination total={25} defaultCurrent={1} className="[&_li]:!mt-0" />
  <Pagination
    total={25}
    rounded="lg"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
  <Pagination
    total={25}
    rounded="none"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
  <Pagination
    total={25}
    rounded="full"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} rounded="sm" defaultCurrent={1} />
      <Pagination total={25} variant="solid" defaultCurrent={1} />
      <Pagination total={25} rounded="lg" defaultCurrent={1} />
      <Pagination total={25} rounded="none" defaultCurrent={1} />
      <Pagination total={25} rounded="full" defaultCurrent={1} />
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of **Pagination** using [**color**](#pagination-colors) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-8">
  <Pagination total={25} defaultCurrent={1} className="[&_li]:!mt-0" />
  <Pagination
    total={25}
    color="secondary"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
  <Pagination
    total={25}
    color="danger"
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} defaultCurrent={1} />
      <Pagination total={25} color="secondary" defaultCurrent={1} />
      <Pagination total={25} color="danger" defaultCurrent={1} />
    </>
  );
}
```

<div className="mb-16" />

## Disabled

You can make **Pagination** disabled using **disabled** property.

<Paper>
  <Pagination
    total={25}
    defaultCurrent={1}
    className="[&_li]:!mt-0 [&_li>a]:!text-[#00000040]"
    disabled
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} defaultCurrent={1} disabled />;
}
```

<div className="mb-16" />

## With Outline

You can change the style of **Pagination** using **outline** property.

<Paper>
  <Pagination
    total={25}
    outline={true}
    defaultCurrent={1}
    className="[&_li]:!mt-0"
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} outline={true} defaultCurrent={1} />;
}
```

<div className="mb-16" />

## With Custom Previous & Next

You can change the style of **Pagination** using **prevIcon** & **nextIcon** property.

<Paper>
  <Pagination
    total={100}
    defaultCurrent={5}
    nextIcon="Next"
    prevIcon="Previous"
    className="[&_li]:!mt-0"
    prevIconClassName="py-0 text-foreground !leading-[26px]"
    nextIconClassName="py-0 text-foreground !leading-[26px]"
  />
</Paper>

```tsx
import Pagination from "@components/pagination";

export default function App() {
  return (
    <Pagination
      total={100}
      defaultCurrent={5}
      nextIcon="Next"
      prevIcon="Previous"
      prevIconClassName="py-0 text-foreground !leading-[26px]"
      nextIconClassName="py-0 text-foreground !leading-[26px]"
    />
  );
}
```

<div className="mb-16" />

## With Custom Prev Next Jump

You can change the style of **Pagination** using **jumpPrevIcon** & **jumpNextIcon** property.

<Paper>
  <Pagination
    outline
    total={100}
    defaultCurrent={5}
    className="[&_li]:!mt-0"
    jumpPrevIcon={<ChevronDoubleLeftIcon className="h-4 w-4" />}
    jumpNextIcon={<ChevronDoubleRightIcon className="h-4 w-4" />}
  />
</Paper>

```tsx
import Pagination from "@components/pagination";
import {
  ChevronDoubleRightIcon,
  ChevronDoubleLeftIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Pagination
      outline
      total={100}
      defaultCurrent={5}
      jumpPrevIcon={<ChevronDoubleLeftIcon className="h-4 w-4" />}
      jumpNextIcon={<ChevronDoubleRightIcon className="h-4 w-4" />}
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Pagination Props

Here is the API documentation of the Pagination component.

<div className="overflow-x-auto">

|         Props         |                      Type                       |            Description            |   Default   |
| :-------------------: | :---------------------------------------------: | :-------------------------------: | :---------: |
|    defaultCurrent     |                    `number`                     |                                   |    \_\_     |
|         total         |                    `number`                     |                                   |    \_\_     |
|        variant        |                 `solid` `flat`                  | These are the variants we support |  `"solid"`  |
|        rounded        |    [PaginationRounded](#pagination-rounded)     |      Rounded variations are       |   `"md"`    |
|         color         |     [PaginationColors](#pagination-colors)      |        Change Loader color        | `"primary"` |
|        outline        |                    `boolean`                    |    Whether show outline or not    |   `false`   |
|       disabled        |                    `boolean`                    |                                   |    \_\_     |
|   prevIconClassName   |                    `string`                     | Pass className for previous icon  |    \_\_     |
|   nextIconClassName   |                    `string`                     |   Pass className for next icon    |    \_\_     |
| jumpPrevIconClassName |                    `string`                     | Pass className for previous icon  |    \_\_     |
| jumpNextIconClassName |                    `string`                     |   Pass className for next icon    |    \_\_     |
|       onChange        |  `((page: number, pageSize: number) => void)`   |                                   |    \_\_     |
|   onShowSizeChange    |   `((current: number, size: number) => void)`   |                                   |    \_\_     |
|      itemRender       | [PaginationItemRender](#pagination-item-render) |                                   |    \_\_     |
|       showTotal       |  [PaginationShowTotal](#pagination-show-total)  |                                   |    \_\_     |
|       className       |                    `string`                     |                                   |    \_\_     |
|    selectPrefixCls    |                    `string`                     |                                   |    \_\_     |
|       prefixCls       |                    `string`                     |                                   |    \_\_     |
|    pageSizeOptions    |              `string[]` `number[]`              |                                   |    \_\_     |
|        current        |                    `number`                     |                                   |    \_\_     |
|       pageSize        |                    `number`                     |                                   |    \_\_     |
|    defaultPageSize    |                    `number`                     |                                   |    \_\_     |
|   hideOnSinglePage    |                    `boolean`                    |                                   |    \_\_     |
|    showSizeChanger    |                    `boolean`                    |                                   |    \_\_     |
|     showLessItems     |                    `boolean`                    |                                   |    \_\_     |
|  showPrevNextJumpers  |                    `boolean`                    |                                   |    \_\_     |
|    showQuickJumper    |               `boolean` `object`                |                                   |    \_\_     |
|       showTitle       |                    `boolean`                    |                                   |    \_\_     |
|        simple         |                    `boolean`                    |                                   |    \_\_     |
|        locale         |               `PaginationLocale`                |                                   |    \_\_     |
|         style         |                 `CSSProperties`                 |                                   |    \_\_     |
| selectComponentClass  |               `ComponentType<{}>`               |                                   |    \_\_     |
|       prevIcon        |         `ReactNode` `ComponentType<{}>`         |                                   |    \_\_     |
|       nextIcon        |         `ReactNode` `ComponentType<{}>`         |                                   |    \_\_     |
|     jumpPrevIcon      |         `ReactNode` `ComponentType<{}>`         |                                   |    \_\_     |
|     jumpNextIcon      |         `ReactNode` `ComponentType<{}>`         |                                   |    \_\_     |

</div>

- **Note:** You can check [**rc-pagination documentation**](https://pagination-react-component.vercel.app/) for more details.

<div className="mb-10" />

### Pagination Rounded

```ts
type PaginationRounded = "sm" | "md" | "lg" | "none" | "full";
```

<div className="mb-10" />

### Pagination Colors

```ts
type PaginationColors = "primary" | "secondary" | "danger";
```

<div className="mb-10" />

### Pagination Item Render

```ts
type PaginationItemRender = (
  page: number,
  type: "page" | "next" | "prev" | "jump-prev" | "jump-next",
  element: ReactNode
) => ReactNode;
```

<div className="mb-10" />

### Pagination Show Total

```ts
type PaginationShowTotal = (
  total: number,
  range: [number, number]
) => ReactNode;
```
