---
title: "Pagination"
type: component
version: "2.2.1"
doc_version: "2.5.0"
status: stable
date: 2026-06-17
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS pagination. Numbered pages, prev/next arrows, page jump select — no JavaScript. WCAG accessible, works with Django, HTMX, Laravel, React."
url: https://frutjam.com/components/pagination
---

# Pagination

 Pagination components let users navigate between pages of content — search results, data tables, article archives, and product listings. Built by composing the [Join](/components/join) and [Button](/components/button) components, Frutjam pagination requires no JavaScript and no extra CSS. Supports numbered pages, prev/next arrows, ellipsis gaps, accessible radio inputs, and a page-jump select.

CSS-only, no JavaScript required — build accessible pagination with pure HTML and Tailwind CSS. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, Next.js, and any stack.

| Class        | Type     | Description                                      |
| ------------ | -------- | ------------------------------------------------ |
| join         | Base     | Groups buttons into a connected pagination strip |
| join-item    | Modifier | Each page button or input inside the join        |
| btn-active   | State    | Highlights the current page                      |
| btn-disabled | State    | Non-interactive ellipsis or unavailable page     |

## Basic Pagination

A numbered page strip with one active page. Apply **btn-active** to highlight the current page. Use anchor tags instead of buttons for server-rendered page links.

### Sizes

Pagination inherits all button sizes. Use **btn-xs** or **btn-sm** for compact tables and **btn-lg** for touch-first interfaces.

### With Ellipsis

Use **btn-disabled** for the ellipsis gap between a large range of pages. Screen readers skip disabled buttons so pair with `aria-hidden="true"` on the ellipsis.

## Previous / Next Navigation

Arrow-based pagination is the most common pattern for blogs, product listings, and any paginated feed where showing exact page numbers isn't practical.

### With Arrow Icons

### Equal-Width Prev / Next

Use a **grid grid-cols-2** wrapper on the join container to give both buttons equal width — ideal for mobile-first layouts and full-width pagination bars.

### With First / Last

Add double-arrow buttons to let users jump directly to the first or last page. Useful for data tables with hundreds of pages.

## Accessible Radio Pagination

Use `type="radio"` inputs as join items for fully keyboard-navigable, CSS-only page selection with no JavaScript. Each input acts as a pressable button while keeping the selected state in native form state.

## Pagination with Page Jump

Combine join, buttons, and a select for a compact pagination bar that lets users jump directly to any page — common in admin dashboards, CMS interfaces, and data-heavy apps. No JavaScript required for the select itself; pair with HTMX or a form submit for server-side navigation.

## Outline Style

Use **btn-outline** on all buttons for a lighter visual weight that suits secondary content sections and sidebars.