Vibe UI
Initializing Vibe UI System...
Vibe UI

Pagination

A customizable component for page navigation controls.

Pagination

A customizable component for page navigation controls.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add pagination button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Themes

Explore design variant presets for the Pagination component side-by-side.

Default
Glassmorphism
Brutalist Retro
Neon Glow

Examples

1. Advanced Navigation Controls

A combination of quick page jumper dropdowns and range slider navigation controls.

Page 4of 10

2. Stateful Load More Progress

A progress bar showing loaded item stats with an interactive "Load More" action button and spinner animation.

Showing 20 of 100 items20%

Props

Pagination

PropTypeDefaultDescription
classNamestring-Additional utility styles for layout alignment.

PaginationLink

PropTypeDefaultDescription
isActivebooleanfalseWhen true, highlights the page button as the current active page.
variant'default' | 'glass' | 'retro' | 'glow' | 'outline' | 'secondary' | 'ghost''outline'The visual aesthetic theme applied to the pagination link control.
size'default' | 'sm' | 'lg' | 'icon''icon'Size variant preset for the button container.
asButtonbooleanfalseWhen true, renders a native button element instead of an anchor link tag.

PaginationDots

PropTypeDefaultDescription
totalPagesnumber-Total number of pages to render indicator dots for.
currentPagenumber-Currently active page index.
onPageChange(page: number) => void-Callback function triggered when a dot is clicked.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual style theme preset for the dot navigation bar.

PaginationSlider

PropTypeDefaultDescription
totalPagesnumber-Total number of pages available on the range slider.
currentPagenumber-Current page value selected by the slider input.
onPageChange(page: number) => void-Callback function triggered when the slider value changes.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual theme preset applied to the range slider.

PaginationMini

PropTypeDefaultDescription
totalPagesnumber-Total number of pages.
currentPagenumber-Current active page.
onPageChange(page: number) => void-Callback function triggered when clicking Previous or Next.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual theme preset for the compact mini pagination bar.

PaginationDropdown

PropTypeDefaultDescription
totalPagesnumber-Total number of pages available in the select dropdown.
currentPagenumber-Currently selected page.
onPageChange(page: number) => void-Callback function triggered when a page option is selected.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual theme preset for the dropdown pagination component.

PaginationProgressLine

PropTypeDefaultDescription
totalPagesnumber-Total count of pages.
currentPagenumber-Active page number.
onPageChange(page: number) => void-Callback triggered when navigating pages.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual theme preset for the progress line component.

PaginationLoadMore

PropTypeDefaultDescription
isLoadingboolean-Whether new items are currently being fetched (shows spinner animation).
onClick() => void-Callback function when user clicks Load More button.
hasNextPageboolean-When true, displays the Load More action button.
loadedCountnumber-Optional number of items loaded so far for progress line calculation.
totalCountnumber-Optional total number of available items across all pages.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Visual theme preset.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Pagination | Vibe UI