GFA Design System is still in development; component APIs and styles may change in upcoming releases.

Ask a Question
Language

Pagination

Composable pagination patterns with live examples.

Lab variants

Three isolated pagination UI patterns, each in its own block. Defaults differ on purpose so the controls never look stuck together.

Buttons

Isolated state · numbered keys · active = primary

GFA Studio CLI · Coming soon

page 3 / 6

Select

Isolated state · native select replaces digit row · chevrons still work

GFA Studio CLI · Coming soon

page 2 / 6

Input

Isolated state · GFA Input replaces digits · commit on blur / Enter

GFA Studio CLI · Coming soon

page 4 / 6

Installation

CLI

GFA Studio CLI — Coming soon

The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.

Manual

  1. These examples compose GFA Button and Input. Install or copy those components from this repo, then adapt the patterns below.
  2. Showcase and stateful demos: apps/web/src/components/gfa/lab/pagination-showcase.tsx

Step-by-step getting started guide →

Release note

Published
20 Apr 2026, 12:00(Türkiye — Ankara, Europe/Istanbul)
Last updated
12 May 2026, 15:00(Türkiye — Ankara, Europe/Istanbul)

Instants are stored as UTC (ISO) in the repo; above are the same moments in Türkiye local time. Ankara uses the Europe/Istanbul zone (same offset as İstanbul and the rest of the country).