Featured
PaginationNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 frameworksIntermediate
Loading…
A full-width footer bar joining a table above with a range readout and steppers.
<!--
A footer bar meant to sit under a table: border-t joins it to the grid above,
and it stacks to two rows under sm so the readout never collides with the
controls on a phone.
-->
<nav aria-label="Pagination" class="flex w-full flex-col gap-3 border-t border-gray-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800">
<p class="m-0 text-sm tabular-nums text-gray-600 dark:text-gray-400" role="status" aria-live="polite">
<span class="font-medium text-gray-900 dark:text-gray-100">11–20</span> of <span class="font-medium text-gray-900 dark:text-gray-100">240</span>
</p>
<div class="flex items-center gap-2">
<span class="mr-1 text-sm tabular-nums text-gray-500 dark:text-gray-400">Page 2 of 24</span>
<a href="?page=1" rel="prev" class="inline-flex h-10 items-center rounded-md border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Previous</a>
<a href="?page=3" rel="next" class="inline-flex h-10 items-center rounded-md border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Next</a>
</div>
</nav>| Prop | Type | Default | Description |
|---|---|---|---|
currentPagerequired | number | - | The active page number, starting at 1. |
pageSizerequired | number | - | How many items each page shows. |
totalItemsrequired | number | - | How many items exist across all pages. |
buildHrefrequired | (page: number) => string | - | Builds the URL for a page number, so pages stay real links. |
ariaLabel | string | 'Pagination' | The button's accessible name. Required for icon-only buttons. |
className | string | - | Additional classes merged onto the root element. |
Built to sit under a data table: `border-t` joins it to the grid, and it stacks to two rows under `sm` so the range readout never collides with the controls on a phone. Both the range and the page count derive from `currentPage`, `pageSize` and `totalItems` on each render rather than being stored. Drop it directly beneath a `<table>` or inside a card footer.