Aedis UI

Pagination

Previous, next and page links for paginated lists.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add pagination# pnpm dlx @aedis/cli@0.1.0 add pagination · yarn dlx @aedis/cli@0.1.0 add pagination · bunx @aedis/cli@0.1.0 add pagination

Props

PropTypeDefaultDescription
parsePage(value, total)number—A page from the URL or a form, as an integer from 1 to total; anything else becomes 1.
paginationRange(page, total, siblings?)(number | "ellipsis")[]—Pages to render around the current one.
PaginationLink isActiveboolean—The current page (aria-current="page").
labelsPartial<PaginationLabels>—label, previous, next, goPrevious, goNext, more.

Security

  • Page numbers from the URL are untrusted: parsePage keeps integers within bounds and caps the total.
  • Every href goes through safeUrl; a refused one renders a disabled page.