Components

Pagination

Keep record navigation legible and make the current page explicit.

Usage & approach

Wire pagination to your own data source. This is a static first-page state: numbered controls are disabled where no data navigation exists. Use aria-current on the current page and accessible labels for icon-only controls if you introduce them.

Specifications

Size: min-h-11 min-w-11
Current: bg-[#006838] text-white
Layout: flex flex-wrap items-center justify-between gap-4
Record count: text-sm tabular-nums

First page state

Record count, current page, and unavailable navigation.

<div class="flex flex-wrap items-center justify-between gap-4">
  <p class="text-sm tabular-nums text-[#333] dark:text-[#c4c7c5]">Showing 1–10 of 10 records</p>
  <nav aria-label="Pagination" class="flex gap-2"><button type="button" disabled class="min-h-11 rounded-md border border-[#c7d4c9] px-3 text-sm disabled:cursor-not-allowed disabled:opacity-50">Previous</button><span aria-current="page" class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md bg-[#006838] text-sm font-semibold text-white">1</span><button type="button" disabled class="min-h-11 rounded-md border border-[#c7d4c9] px-3 text-sm disabled:cursor-not-allowed disabled:opacity-50">Next</button></nav>
</div>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.