Tailwind CSS Pagination

Use the pagination component to move between pages of content, like a data table, search results, or a blog archive. For paging the slides of a carousel, use its own carousel pagination.

<nav class="pagination">
  <a href="#" class="pagination-item pagination-previous">
    <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"><path d="m15 18-6-6 6-6"/></svg>
    <span class="hidden sm:block">Previous</span>
  </a>
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
  <span class="pagination-ellipsis">
    <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    <span class="sr-only">More pages</span>
  </span>
  <a href="#" class="pagination-item pagination-next">
    <span class="hidden sm:block">Next</span>
    <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"><path d="m9 18 6-6-6-6"/></svg>
  </a>
</nav>

Usage

Add the pagination class to a <nav> and put one pagination-item link per page inside. Mark the current page's link with the active class.

Class	Description
`pagination`	Add to the `<nav>` holding the links
`pagination-item`	Add to each `<a>`, with `active` on the current page
`pagination-sm`	Add to `pagination` for compact items
`pagination-previous` `pagination-next`	Add to `pagination-item` for the previous and next links
`pagination-ellipsis`	Add to a `<span>` standing in for skipped pages

<nav class="pagination">
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
</nav>

Examples

Simple pagination

A simple pagination with only page numbers.

<nav class="pagination">
  <a href="#" class="pagination-item">1</a>
  <a href="#" class="pagination-item active">2</a>
  <a href="#" class="pagination-item">3</a>
  <a href="#" class="pagination-item">4</a>
  <a href="#" class="pagination-item">5</a>
</nav>

Pagination with icons only

Use only the previous and next buttons, like next to a rows per page select in a data table.

<div class="flex w-full max-w-lg items-center justify-between gap-4">
  <div class="field field-horizontal w-fit">
    <label class="label" for="pagination-rows-per-page">Rows per page</label>
    <select class="select w-20" id="pagination-rows-per-page">
      <option>10</option>
      <option selected>25</option>
      <option>50</option>
      <option>100</option>
    </select>
  </div>
  <nav class="pagination">
    <a href="#" class="pagination-item pagination-previous">
      <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"><path d="m15 18-6-6 6-6"/></svg>
      <span class="hidden sm:block">Previous</span>
    </a>
    <a href="#" class="pagination-item pagination-next">
      <span class="hidden sm:block">Next</span>
      <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"><path d="m9 18 6-6-6-6"/></svg>
    </a>
  </nav>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. Flip the previous and next chevrons with rtl:rotate-180. See the RTL guide for details.

<div id="pagination-rtl-demo" dir="rtl">
  <nav class="pagination">
    <a href="#" class="pagination-item pagination-previous">
      <svg class="rtl:rotate-180" 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"><path d="m15 18-6-6 6-6"/></svg>
      <span class="hidden sm:block" data-i18n="previous">السابق</span>
    </a>
    <a href="#" class="pagination-item" data-i18n="p1">١</a>
    <a href="#" class="pagination-item active" data-i18n="p2">٢</a>
    <a href="#" class="pagination-item" data-i18n="p3">٣</a>
    <span class="pagination-ellipsis">
      <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
      <span class="sr-only">More pages</span>
    </span>
    <a href="#" class="pagination-item pagination-next">
      <span class="hidden sm:block" data-i18n="next">التالي</span>
      <svg class="rtl:rotate-180" 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"><path d="m9 18 6-6-6-6"/></svg>
    </a>
  </nav>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", previous: "السابق", next: "التالي", p1: "١", p2: "٢", p3: "٣" },
    he: { dir: "rtl", previous: "הקודם", next: "הבא", p1: "1", p2: "2", p3: "3" },
    en: { dir: "ltr", previous: "Previous", next: "Next", p1: "1", p2: "2", p3: "3" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("pagination-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>