Offset Pagination

Installation

Run the following command

npx vibes@latest add offset-pagination

Usage

import { OffsetPagination } from '@/vibes/soul/primitives/offset-pagination';function Usage() {  return (      <OffsetPagination pages={8} />  );}

API Reference

This component maintains state for the current page by using a search parameter called page. While this component will update the search param with the current page, it is your responsibility to handle changes to the selected page.

Refer to the Learn Next.js tutorial section on adding search and pagination for more background on how to handle that.

OffsetPaginationProps

PropTypeDefault
pages*
number

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --offset-pagination-focus: var(--primary);  --offset-pagination-font-family: var(--font-family-body);  --offset-pagination-ellipsis: var(--foreground);  --offset-pagination-border: var(--contrast-100);  --offset-pagination-text: var(--foreground);  --offset-pagination-background-hover: var(--contrast-100);  --offset-pagination-current-page-border: var(--foreground);  --offset-pagination-current-page-background: var(--foreground);  --offset-pagination-current-page-text: var(--background);  --offset-pagination-current-pagebackground-hover: var(--contrast-500);}