ns-ui
A pagination control rendered as book folios — paper cards for each page number, a raised current page, and a CSS corner dog-ear that curls further as you hover prev/next to peek the destination number, leaving a small permanent crease on every page you've visited.
Use when paged results where the pages should read as a physical set the reader is moving through, hovering prev or next curling a corner to peek the destination number and every visited page keeping a permanent crease; pick breadcrumb-fold or breadcrumb-overflow-menu instead when the navigation is a hierarchy rather than a flat ordered sequence, since a dog-ear encodes visited-ness and adjacency and a hierarchy has neither.
Install
npx shadcn add https://design.helpmarq.comns-ui / pagination-dog-ear
Hover next/prev to peek the corner curl on the current page; visited pages keep a small permanent crease.
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Current page, 1-indexed. |
| count | number | — | Total number of pages. |
| onChange | (page: number) => void | — | — |
| className? | string | — | — |