# Pill Pagination

> A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: cards, pagination
- Page: https://builder.atheros.ai/components/pills
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_pills/preview-fb4a333252b2.webp

## Features

- Rounded pill pagination items with a contrast-safe, design-system-derived active state
- Animated ellipsis windowing across 9 pages — out-of-window pills collapse (width, gap and opacity) while incoming ones expand, so the window slides fluidly and the ellipsis morphs into numbers instead of popping
- Active-pill selection fill grows from the pill centre on a pseudo-element, handing off between neighbours
- Previous/next arrow navigation with disabled first and last states
- Collectible lifestyle field-note cards with local photography, three distinct issue/badge treatments, curated routes, and fixed page geometry
- “Explore” toggle that becomes “Active” while selected, with stateful `aria-pressed`
- Keyboard navigation with arrow keys plus Home/End jumps
- Responsive layout that stacks to a single column on mobile
- Readable heading emphasis and keyboard hints across every light and dark theme
- Stateful Explore buttons, visible radio focus, and concise page-change announcements

## Accessibility

- **Pagination state** — Native named radio inputs expose the selected page; their visible pill receives the focus ring
- **Keyboard nav** — Native radio ArrowLeft/ArrowRight behavior, Home/End jumps on the radio group, plus document-level Arrow/Home/End navigation when focus is outside an interactive control
- **Ellipses** — Decorative `...` separators are `aria-hidden` and not focusable; the live region announces the page instead
- **Explore state** — Real buttons expose the Active state through `aria-pressed` and an action label
- **Focus indicators** — `:focus-visible` with `--ring` outlines pagination and Explore controls
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Live regions** — A concise polite status announces page number and result count without re-announcing every card
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowLeft` — Previous page
- `ArrowRight` — Next page
- `Home` — First page
- `End` — Last page

## Common questions

**Which frameworks is Pill Pagination available in?**

Pill 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 the Pill Pagination navigation component free?**

Yes. Pill Pagination is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Pill Pagination support dark mode?**

Yes. Pill Pagination ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Pill 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/pills

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