components / 24

marked pagination

place is information. the current page gets one clear human mark while every other control stays quiet and native.

shadcnnpx shadcn@latest add berkantay/cheez/marked-pagination

live

forty-eight pages, one position

page 8 / 48

showing marks 85–96

size

ink

character

compact arrowsspread edges

<MarkedPagination tone="orange" size="medium">
  <MarkedPaginationList>
    <MarkedPaginationPrevious href="?page=7" />
    {range.map((item) => /* link or ellipsis */)}
    <MarkedPaginationNext href="?page=9" />
  </MarkedPaginationList>
</MarkedPagination>

range

the gaps move, the anchors stay

deterministic and framework-free

first / 1

middle / 12

last / 48

compact

small screen, complete context

previous · status · next

archivefield notes240 entries

voice

same place, different hand

calm · rushed · chaotic

calm

rushed

chaotic

reference

api

composable native controls

prop	type	default	purpose
`pageCount`	`number`	`required`	total pages passed to the range helper
`currentPage`	`number`	`required`	active page passed to the range helper
`siblingCount`	`number`	`1`	pages visible beside the current page
`boundaryCount`	`number`	`1`	pages kept visible at each edge
`size`	`"small" \| "medium" \| "large"`	`"medium"`	control rhythm
`tone`	`MarkedPaginationTone`	`"orange"`	built-in ink palette
`color`	`string`	`tone color`	custom ink override
`compact`	`boolean`	`false`	visually hides direction labels
`spread`	`boolean`	`false`	pushes previous and next to the edges
`thickness`	`number`	`1`	non-scaling pen weight
`Link.current`	`boolean`	`false`	sets aria-current and draws the active mark
`Link.disabled`	`boolean`	`false`	sets aria-disabled and removes tab focus
`Link.activeMark`	`CheezType`	`"circle"`	current-page drawing
`Link.hoverMark`	`CheezType`	`"underline"`	interaction drawing
`Link.character`	`CheezCharacter`	`"rushed"`	drawing personality
`Status.live`	`boolean`	`false`	announces client-side page changes

behavior notes

use links for route navigation and buttons when the dataset changes in place
the current control sets aria-current="page"; it does not disable navigation
previous and next use rel="prev" and rel="next" automatically
disabled links leave the tab order and expose aria-disabled
ellipsis carries readable context for assistive technology
the range helper clamps invalid values and never emits duplicate pages
only Cheez ink animates; pagination layout never moves