Display active page and navigate between multiple pages
id: 0 , name: mantine-p8gf24wuv
id: 1 , name: mantine-mcvi1j5et
id: 2 , name: mantine-ho0vz7kir
id: 3 , name: mantine-t0hodem28
id: 4 , name: mantine-gfs39npai
To control the component state, provide value and onChange props:
Control the number of active item siblings with the siblings prop:
Control the number of items displayed after previous and before next buttons with the boundaries prop:
1 boundary (default)
Set layout="responsive" to use CSS container queries to show a compact "Page X of Y" label when the container is narrow. Use formatLabel prop to customize the label text.
Set withPages={false} to hide the pages controls:
Showing 1 – 10 of 145
Pagination supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
You can use the following compound components to have full control over the Pagination rendering:
Pagination supports the autoContrast prop and theme.autoContrast . If autoContrast is set either on Pagination or on the theme, the content color will be adjusted to have sufficient contrast with the value specified in the color prop.
Note that the autoContrast feature works only if you use the color prop to change the background color.
By default, pagination controls have reduced size compared to inputs and buttons. If you want controls to have the same size as inputs and buttons, you can use input- prefix for the size prop:
Set startValue to define the starting page number. For example, with startValue={5} and total={15} , the pagination range will be from 5 to 15:
Pages 5–15 (startValue=5, total=15)
You can synchronize pagination state with URL query parameters. This pattern is commonly used for list views where you want to share the URL with a specific page selected.
Example using nuqs :
If you need more flexibility, the @mantine/hooks package exports the use-pagination hook. You can use it to create custom pagination components.