# Pagination

The `Pagination` component provides pagination with page navigation, next and previous links. The pagination is generated dynamically using query params: ?page=1

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fd1nBrE8cjzNLVf2UBjC9%2Fpagination.png?alt=media&#x26;token=3a6d2f74-8455-457c-af58-236152852427" alt="Gravity pagination component" width="184"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Pagination } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Pagination total={ 5 } limit={ 25 } className={ Style.pagination }/>
    </div>
  );
}

```

### Props

| Prop      | Description                                                                                                                | Required | Value            |
| --------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------- |
| children  | child components as per [Shadcn docs](https://ui.shadcn.com/docs/components/pagination) if not using total and limit props | optional | component(s)     |
| className | custom styles                                                                                                              | optional | SCSS or Tailwind |
| total     | the total number of items in the list                                                                                      | required | integer          |
| limit     | the number of items per page                                                                                               | required | integer          |

### Notes

* The `Pagination` component uses various sub-components like `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, and `PaginationEllipsis`.
* The `total` prop specifies the total number of items in the list
* The `limit` prop determines how many items to show per page
* The `className` prop allows for custom styling to be applied.
* If `items` is not provided, the `children` prop can be used to pass custom child components.
* For more details, refer to the [Shadcn Pagination documentation](https://ui.shadcn.com/docs/components/pagination).