Pagination
Pagination is a neobrutalist React component from Cruise UI. Page numbers with Previous / Next; compacts to "Page 3 of 12" on phones. Install it with npx shadcn@latest add @cruiseui/pagination.
Install
Terminal
npx shadcn@latest add @cruiseui/paginationFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
"use client";
import { useState } from "react";
import { CruisePagination } from "@/components/cruise/pagination";
export default function PaginationExample() {
const [page, setPage] = useState(5);
return <CruisePagination page={page} pageCount={20} onPageChange={setPage} />;
}
<nav class="pagination" aria-label="Pagination">
<ul>
<li><a class="brutal page-btn" href="?page=4" aria-label="Previous page">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
<span class="page-step-text">Previous</span></a></li>
<li data-page><a class="brutal page-btn" href="?page=1" aria-label="Page 1">1</a></li>
<li data-page><span class="page-gap" aria-hidden="true">…</span></li>
<li data-page><a class="brutal page-btn" href="?page=4" aria-label="Page 4">4</a></li>
<li data-page><a class="brutal page-btn on-primary" aria-current="page" aria-label="Page 5">5</a></li>
<li data-page><a class="brutal page-btn" href="?page=6" aria-label="Page 6">6</a></li>
<li data-page><span class="page-gap" aria-hidden="true">…</span></li>
<li data-page><a class="brutal page-btn" href="?page=20" aria-label="Page 20">20</a></li>
<li class="page-compact">Page 5 of 20</li>
<li><a class="brutal page-btn" href="?page=6" aria-label="Next page">
<span class="page-step-text">Next</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
</ul>
</nav>
<!-- On page 1, Previous has no href: <a class="brutal page-btn" aria-disabled="true" aria-label="Previous page"> -->Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Long lists split into pages: orders, search results.
When not to
Feeds (a "Load more" button is simpler).
Props
CruisePagination
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | — | The current page (1-based). |
pageCount | number | — | — |
onPageChange | (page: number) => void | — | — |
className? | string | — | — |
Accessibility
- <nav aria-label="Pagination">; the current page has aria-current="page".
- Previous / Next keep their aria-label when the text hides on small screens.