Dev experience · 06

Pagination cursor snippet

Three stacked code blocks — first-page request, cursor response, follow-up request — with arrow rails between them.

Production answer

Pagination cursor snippet is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Pagination cursor snippet states
Generative search brief

Pagination cursor snippet: Three stacked code blocks — first-page request, cursor response, follow-up request — with arrow rails between them.

bookings.list — cursor pagination
Pagination

Cursor-based — three calls

First request returns a next_cursor. Forward the cursor on the next call to receive the following page until next_cursor is null.

  1. First pageGET /v1/bookings
    CURL
    curl https://api.mufflermen.com/v1/bookings?limit=20 \  -H "Authorization: Bearer $MUFFLERMEN_API_KEY"
  2. Response · next_cursor200 OK
    JSON
    {  "data": [    { "id": "bkg_01HQ8E...", "vehicle_id": "veh_2026_ford_ranger_xl", "bay_id": "bay_oak_flats_03" },    { "id": "bkg_01HQ8F...", "vehicle_id": "veh_2025_toyota_hilux_sr5", "bay_id": "bay_oak_flats_01" }  ],  "page": {    "limit": 20,    "next_cursor": "cur_b6f9c4d0",    "has_more": true  }}
  3. Second pageGET /v1/bookings?cursor=...
    CURL
    curl https://api.mufflermen.com/v1/bookings?limit=20&cursor=cur_b6f9c4d0 \  -H "Authorization: Bearer $MUFFLERMEN_API_KEY"
Behaviour

Steps render in an ordered list with explicit numbering chips so a screen reader announces them in order. The arrow rail between each step is hidden via aria-hidden="true"— it's purely a visual flow indicator and would otherwise add noise to the reading order.