Logical Pagination

A smart pagination component that dynamically displays page numbers based on the current page, total pages, and screen size. It adapts to different viewports using breakpoints and optionally shows previous/next controls for better navigation.

How To Use

Install

Run the following command in terminal to add these components in your project.

Import

You can now import this component anywhere you need to use it.

import { LogicalPagination } from @/components/ui/bloom/logical-pagination';

Preview

Open in

Accepted Props

Props

Prop	Type	Default
`size?`	`Partial<typeof BreakPoints>`	`{ sm: 5 }`
`totalPages`	`number`	-
`currentPage`	`number`	-
`isPrev?`	`boolean`	`true`
`isNext?`	`boolean`	`true`
`onPageChange`	`(page: number) => void`	-
`className?`	`string`	-
`PreviousComponent?`	`FC<ComponentProps<"button">>`	`DefaultPrevious`
`NextComponent?`	`FC<ComponentProps<"button">>`	`DefaultNext`
`GapPlaceholderComponent?`	`FC`	`DefaultGapPlaceholder`
`PageNumberComponent?`	`FC<PageNumberProps>`	`DefaultPageNumber`