paginova

8 beautiful pagination variants for vanilla JavaScript. Zero dependencies.

npm install paginova @hoangnguyen035/paginova-core @hoangnguyen035/paginova-styles

import { Pagination } from 'paginova';
import '@hoangnguyen035/paginova-styles/paginova.css';

const pag = new Pagination({
  el: '#pagination',
  variant: 'pills',
  totalPages: 20,
  currentPage: 1,
  onChange: (page) => console.log('go to', page),
});

pag.next();
pag.prev();
pag.goTo(5);
pag.setTheme('light');
pag.setVariant('classic');
pag.destroy();

Variants

classic · pills · dots · bordered · track · compact · progress · steps

Config

interface PaginationConfig {
  el: HTMLElement | string;          // selector or element
  variant?: Variant;                 // default 'classic'
  totalPages: number;
  currentPage?: number;              // default 1
  siblingCount?: number;             // default 1
  boundaryCount?: number;            // default 1
  ariaLabel?: string;
  theme?: 'dark' | 'light';          // default 'dark'
  onChange?: (page: number) => void;
}

License: MIT