# 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="/files/vK7IPvsDkDjg87Pwa5AE" 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/pagination.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.