Pagination

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Nav Sidebar →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add navigation/pagination

Plain-CSS theme — no build step

npx astrocraft-ui add navigation/pagination --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add navigation/pagination --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add navigation/pagination --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add navigation/pagination --theme tailwind --bridge lumos

Pagination

Pagination — cursor

A cursor API has no page numbers and no total, so the whole state is whether there is another cursor in that direction. With no href the control stays put as a disabled link rather than vanishing and shifting everything else under the pointer.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`Pagination.astro`	`pagination`	—	—	—
`PaginationEllipsis.astro`	`pagination-ellipsis` `pagination-ellipsis-text`	—	—	—
`PaginationItem.astro`	`pagination-item`	—	—	—
`PaginationLink.astro`	`pagination-link`	—	—	`[aria-current]`
`PaginationPrevNext.astro`	`pagination-link` `pagination-prev-next`	`data-direction`: `previous` · `next`	—	`[aria-disabled]`

Source

What the command copies — 6 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/navigation/pagination/Pagination.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"nav">;

const { class: className, ...rest } = Astro.props;
---

<nav aria-label="Pagination" data-slot="pagination" {...rest}>
  <ul class={className}>
    <slot />
  </ul>
</nav>

src/components/ui/navigation/pagination/PaginationEllipsis.astro

---
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="pagination-ellipsis" {...rest}>
  <span aria-hidden="true">&hellip;</span>
  <span data-slot="pagination-ellipsis-text">More pages</span>
</li>

src/components/ui/navigation/pagination/PaginationItem.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="pagination-item" {...rest}>
  <slot />
</li>

src/components/ui/navigation/pagination/PaginationLink.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & { href?: string; isActive?: boolean };

const { href, isActive = false, class: className, ...rest } = Astro.props;
---

<a
  href={href}
  aria-current={isActive ? "page" : undefined}
  data-slot="pagination-link"
  class={className}
  {...rest}
>
  <slot />
</a>

src/components/ui/navigation/pagination/PaginationPrevNext.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & { direction?: "previous" | "next"; href?: string };

const { direction = "next", href, class: className, ...rest } = Astro.props;
const label = direction === "previous" ? "Previous page" : "Next page";
const Tag = href ? "a" : "span";
---

<li data-slot="pagination-prev-next" data-direction={direction}>
  <Tag
    href={href}
    rel={href ? (direction === "previous" ? "prev" : "next") : undefined}
    role={href ? undefined : "link"}
    aria-disabled={href ? undefined : "true"}
    class={className}
    data-slot="pagination-link"
    {...rest}
  >
    <slot>{label}</slot>
  </Tag>
</li>

src/components/ui/navigation/pagination/index.ts

import Pagination from "./Pagination.astro";
import PaginationEllipsis from "./PaginationEllipsis.astro";
import PaginationItem from "./PaginationItem.astro";
import PaginationLink from "./PaginationLink.astro";
import PaginationPrevNext from "./PaginationPrevNext.astro";

export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationPrevNext };
export default Pagination;

What you get

The component source, copied into your project by npx astrocraft-ui add navigation/pagination — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

Pagination

Pagination — cursor

Attribute surface

Source

What you get