Paginator

A scroll position indicator for windowed lists. Supports four display styles: dots, arrows, scrollbar, and counter.

Paginator is a pure display component — it has no focus or interactivity. Pass it the total item count, current scroll offset, and number of visible items. It computes and renders the appropriate indicator. When the total number of items fits within the visible window, Paginator renders nothing.

import { Paginator } from 'giggles/ui';

<Paginator total={100} offset={20} visible={10} style="scrollbar" />

Dots

Shows a row of ● dots below the list.

Arrows

Shows ↑ and ↓ indicators above and below the list when there are items outside the visible window.

Scrollbar

Shows a vertical bar beside the list with a thumb that tracks scroll position.

Counter

Shows a text range like 1–10 of 50 below the list.

API Reference

Paginator

PaginatorStyle

type PaginatorStyle = 'dots' | 'arrows' | 'scrollbar' | 'counter' | 'none';