Pagination styles built with Motion. Install via CLI or copy the code into your project.
Simple
A minimal pagination with basic navigation.
Page 1 of 10
npx @abhivarde/syncui@latest add paginations/simple
Numbered
Traditional pagination with visible page numbers.
1
2
3
4
...
10
npx @abhivarde/syncui@latest add paginations/numbered
Compact
A space efficient pagination with first and last page controls.
1
2
3
4
...
npx @abhivarde/syncui@latest add paginations/compact
With Dropdown
Pagination with dropdown controls for page and rows per page.
Rows per page
25
Page 1
npx @abhivarde/syncui@latest add paginations/with-dropdown
Rows Per Page
Pagination with rows per page selection and item range.
Rows per page
25
1-25 of 250
npx @abhivarde/syncui@latest add paginations/rows-per-page
Fading
A smooth fade animation between pages.
1
npx @abhivarde/syncui@latest add paginations/fading
Sliding
A horizontal sliding animation between page numbers.
1
2
3
4
5
6
7
8
9
10
npx @abhivarde/syncui@latest add paginations/sliding
Expanding
An expanding and collapsing animation for page indicators.
npx @abhivarde/syncui@latest add paginations/expanding