Pagination

Pagination with page navigation, next and previous links.

tsx

<Pagination>...</Pagination>

Pagination — nav des pages d'une liste. Une seule PaginationLink porte isActive. PaginationPrevious/Next et PaginationEllipsis pour les extrémités et les gaps.

Installation

Terminal

$ bext ui add pagination

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from "@bext-stack/ui/primitives"

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?p=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?p=1">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink isActive href="?p=2">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="?p=3">3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="?p=3" /></PaginationItem>
  </PaginationContent>
</Pagination>

Anatomy

<Pagination>
  └── <PaginationContent>              // <ul>
      ├── <PaginationItem><PaginationPrevious href="?p=1" /></PaginationItem>
      ├── <PaginationItem><PaginationLink isActive href="?p=2">2</PaginationLink></PaginationItem>
      ├── <PaginationItem><PaginationEllipsis /></PaginationItem>
      └── <PaginationItem><PaginationNext href="?p=3" /></PaginationItem>
</Pagination>

API Reference

Pagination

Prop	Type	Default	Description
children	ReactNode	—	Wrapper .

PaginationContent

Prop	Type	Default	Description
children	ReactNode	—	undefined

PaginationItem

Prop	Type	Default	Description
children	ReactNode	—	undefined

PaginationLink

Prop	Type	Default	Description
href	string	—	undefined
isActive	boolean	—	aria-current="page" + variant outline.
size	"icon" \| "default"	"icon"	undefined
children	ReactNode	—	undefined

PaginationPrevious / PaginationNext

Prop	Type	Default	Description
href	string	—	undefined

PaginationEllipsis

Prop	Type	Default	Description

Accessibility

Le nav porte aria-label="pagination". La page active porte aria-current="page". PaginationEllipsis a aria-hidden + un span visuellement caché "More pages".

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// Pagination steps through pages. The current page is a signal; prev /
// next and clicking a number update it, and each cell's active style
// rebinds — no re-render.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Pagination</h1>
      <p style="color:#64748b;margin-top:0">Navigation for splitting content across pages (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// Pagination steps through pages of content. The current page lives
// in a "use client" island; prev / next and the numbers update it.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Pagination</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Navigation for splitting content across pages.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Navigation Menu Popover →

On This Page