Pagination

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

Preview

Usage

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 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.