Pagination
Accessible pagination with prev/next, page numbers, ellipsis, and configurable URLs
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
The command below includes <strong>Pagination</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npx rizzo-css add Pagination
pnpm dlx rizzo-css add Pagination
npx rizzo-css add Pagination
bunx rizzo-css add Pagination
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Pagination from '../components/astro/Pagination.astro';
---
<Pagination
currentPage={2}
totalPages={10}
hrefTemplate="?page={page}"
showFirstLast
maxVisible={5}
/>
<!-- Rizzo CSS; pagination links. For hash sync include script from package/vanilla docs. -->
<nav class="pagination" aria-label="Pagination">...</nav>
<script>
import { Pagination } from '$lib/rizzo';
</script>
<Pagination
currentPage={2}
totalPages={10}
hrefTemplate="?page={page}"
showFirstLast
maxVisible={5}
/>
<script setup>
import Pagination from '@/components/rizzo/Pagination.vue';
</script>
<template>
<Pagination
:current-page="2"
:total-pages="10"
href-template="?page={page}"
show-first-last
:max-visible="5"
/>
</template>
import { Pagination } from './components/react';
<Pagination
currentPage={2}
totalPages={10}
hrefTemplate="?page={page}"
showFirstLast
maxVisible={5}
/>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun