# Component Guide (Compact Progress Pagination)

> A compact pager that shows "Page X of N" with chevron Prev/Next controls and a thin progress bar that fills with page position — fully design-system agnostic.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Page: https://builder.atheros.ai/components/pagination-compact
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_pagination_compact/preview-bab77199b4e1.webp

## Features

- Compact "Page X of N" label with tabular numerals and a fixed-width slot so single→double-digit pages never shift the layout
- Chevron Prev/Next plus jump-to-first/last double-chevron controls, all built from 24×24 Tabler icons
- Config-driven page model (`totalPages`, `currentPage`, `siblings`) with clamped, bounds-safe navigation
- Directional odometer roll: the page number ticks up or down inside a soft-masked slot, old digit rolling out as the new one rolls in
- Thin progress bar that fills with a smooth decelerating ease via `transform: scaleX`, exposed as a `role="progressbar"` with `aria-valuenow`/`aria-valuetext`
- Bounds are `aria-disabled` (not removed from focus) with a ghosted borderless state at the first and last page
- Semantic `<nav aria-label="Pagination">` landmark and `aria-current="page"` on the active label
- Dedicated polite live region announcing "Page X of N. {title}" on every change
- Full keyboard support: ArrowLeft/ArrowRight step, Home jumps to first, End jumps to last
- Tactile press feedback: fast scale(0.92) snap-down with an inset press shadow and a 1.5px directional chevron nudge, springing back on release
- Live content panel whose title and body swap on each page change
- Responsive panel that adapts padding down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Landmark** — Pager controls are wrapped in `<nav aria-label="Pagination">`
- **Current page** — `aria-current="page"` on the "Page X of N" label
- **Live announcements** — A visually-hidden `role="status"` `aria-live="polite"` region announces "Page X of N. {title}"
- **Progressbar semantics** — The thin track is a `role="progressbar"` with `aria-valuemin/max/now` and `aria-valuetext="Page X of N"` kept in sync on every change
- **Disabled bounds** — First/Prev and Next/Last set `aria-disabled="true"` + a dimmed `.is-disabled` state while staying focusable
- **Keyboard activation** — ArrowLeft/ArrowRight step, Home/End jump to bounds; native buttons handle Enter and Space
- **Accessible names** — Every nav button carries an `aria-label` ("Go to first/previous/next/last page")
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowLeft` — Go to the previous page
- `ArrowRight` — Go to the next page
- `Home` — Jump to the first page
- `End` — Jump to the last page
- `Enter` — Activate the focused nav control
- `Space` — Activate the focused nav control
- `Tab` — Move focus between the pager controls

## Common questions

**Which frameworks is Component Guide (Compact Progress Pagination) available in?**

Component Guide (Compact Progress Pagination) ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Component Guide (Compact Progress Pagination) free?**

Component Guide (Compact Progress Pagination) is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Component Guide (Compact Progress Pagination) support dark mode?**

Yes. Component Guide (Compact Progress Pagination) ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Component Guide (Compact Progress Pagination) live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/pagination-compact

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt