Pagination

Page navigation in nav.pagination > ul > li > a. Current page via aria-current; Prev/Next collapse to icons on small screens.

INSTALL

1pnpm dlx @sayagodev/mo add pagination

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/pagination.css";

EXAMPLES

Default

1<nav aria-label="Pagination">2  <ul class="pagination">3    <li>4      <a href="#" aria-label="Go to previous page">5        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>6        <span class="pagination-label">Previous</span>7      </a>8    </li>9    <li><a href="#">1</a></li>10    <li><a href="#" aria-current="page">2</a></li>11    <li><a href="#">3</a></li>12    <li><span aria-hidden="true">…</span></li>13    <li><a href="#">17</a></li>14    <li>15      <a href="#" aria-label="Go to next page">16        <span class="pagination-label">Next</span>17        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>18      </a>19    </li>20  </ul>21</nav>

Simple

1<nav aria-label="Pagination">2  <ul class="pagination">3    <li><a href="#" aria-label="Go to page 1">1</a></li>4    <li><a href="#" aria-current="page" aria-label="Page 2">2</a></li>5    <li><a href="#" aria-label="Go to page 3">3</a></li>6    <li><a href="#" aria-label="Go to page 4">4</a></li>7    <li><a href="#" aria-label="Go to page 5">5</a></li>8  </ul>9</nav>10

Icon only

1<nav aria-label="Pagination">2  <ul class="pagination">3    <li>4      <a href="#" aria-label="Go to previous page">5        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>6      </a>7    </li>8    <li>9      <a href="#" aria-label="Go to next page">10        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>11      </a>12    </li>13  </ul>14</nav>

Rows per page

1<div class="flex items-center justify-between gap-4">2  <label class="hstack items-center gap-2">3    Rows per page4    <mo-select data-placeholder="25" style="width: 5rem">5      <button type="button" popovertarget="ex-rows-page" data-select-trigger aria-label="Rows per page"></button>6      <ul popover id="ex-rows-page" class="popover" role="listbox" aria-label="Rows per page">7        <li><button type="button" role="option" value="10">10</button></li>8        <li><button type="button" role="option" value="25" aria-selected="true">25</button></li>9        <li><button type="button" role="option" value="50">50</button></li>10        <li><button type="button" role="option" value="100">100</button></li>11      </ul>12    </mo-select>13  </label>14  <nav aria-label="Pagination">15    <ul class="pagination">16      <li>17        <a href="#" aria-label="Go to previous page">18          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>19          <span class="pagination-label">Previous</span>20        </a>21      </li>22      <li>23        <a href="#" aria-label="Go to next page">24          <span class="pagination-label">Next</span>25          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>26        </a>27      </li>28    </ul>29  </nav>30</div>

USAGE

1<nav aria-label="Pagination">2  <ul class="pagination">3    <li>4      <a href="#" aria-label="Go to previous page">5        <svg …chevron-left… /> <span class="pagination-label">Previous</span>6      </a>7    </li>8    <li><a href="#">1</a></li>9    <li><a href="#" aria-current="page">2</a></li>10    <li><span aria-hidden="true">…</span></li>11    <li><a href="#">17</a></li>12    <li>13      <a href="#" aria-label="Go to next page">14        <span class="pagination-label">Next</span> <svg …chevron-right… />15      </a>16    </li>17  </ul>18</nav>

API

NAMEKINDDESCRIPTION

.paginationclassRow of square link targets

> svg + .pagination-labelelementPrev/Next anatomy; label hidden below 640px, svg normalizes to 16px

[aria-current="page"]attributeSolid primary current page

[aria-disabled="true"]attributeDimmed, non-clickable neighbour

span[aria-hidden]elementEllipsis gap

FILES

src/css/pagination.css

Install:mo add pagination

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--background--border--foreground--muted--muted-foreground--radius

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.