Paged grid

component

A paginated grid (the in-game Triumphs / Collections / vault pager): the page of cells flanked by full-height previous/next arrow bars, with page-indicator segments below and a fade+slide in the travel direction on change.

Install

npx shadcn@latest add @engram/paged-grid

Registry item: /r/paged-grid.json — the machine-readable definition agents install from.

Example

510

506

503

510

509

506

508

506

Props

Prop	Type	Default	Description
`items`*	`T[]`	`—`	—
`renderItem`*	`(item: T, index: number) => ReactNode`	`—`	—
`itemKey`*	`(item: T, index: number) => string`	`—`	Stable key per item.
`columns`	`number`	`2`	Columns on `sm`+ (mobile is always a single column). Default 2.
`rows`	`number`	`5`	Rows per page — page size is `columns × rows`. Default 5.
`gap`	`number`	`8`	Gap between cells (px). Default 8.
`cellWidth`	`number`	`—`	Fixed cell width (px). When set, columns are sized to the cell instead of stretching to fill the row, and the packed grid is centered — keeping fixed-size content (e.g. item tiles) tight at every breakpoint. Omit for the default fluid columns.
`minRowHeight`	`number`	`—`	Reserve `rows × minRowHeight` so partial last pages keep the page height.
`label`	`string`	`"Paged grid"`	Accessible label for the paged region.
`className`	`string`	`—`	—

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.