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
Prop | Type | Default |
---|---|---|
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);}