Pagination

Seven ways to move through pages. The current page lifts onto surface and slides to where you clicked.

FreeWeb and Mobile7 variantsMotion

npx shadcn add @fetaui/pagination

Playground

Page Item

numbered

simple

compact

table

jump

load-more

dots

Kind

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/pagination

A nav labelled Pagination.
The current page uses aria-current.
Arrows are labelled Previous page and Next page. Reaching the end moves focus to the other arrow.
Dots are buttons with full names, like Go to slide 3.

The active pill slides to the new page on a spring, and page numbers, ranges and counts flow digit by digit to their new values.
An ellipsis grows into the jump field and focus moves in.
The Load more track fills in 240 ms.
The active dot stretches from 6 to 20 over 200 ms, and seen dots darken.
With reduced motion, the pill jumps and the track fills at once.

Numbered draws the first, last and current pages with neighbours, so a thousand pages stay about seven buttons. Simple draws every page.
The active pill is one shared layout element on its own layer, so the numbers never move.
The Load more track animates scaleX, a transform.

Give your coding assistant the Markdown reference instead of screenshots.

Import Pagination from @/components/fetaui/pagination after installing it. PageItem is exported for custom trays.
kind is numbered, simple, compact, table, jump, load-more or dots. Use page and onPageChange, or defaultPage.
table works out its own last page from total and perPage, and takes onPerPageChange. Without total it shows Page n of pages. load-more needs shown, total, step and onLoadMore. For dots, pages is the slide count.
Load more in the demo only raises a counter, so fetch your rows there. Composes Button, IconButton, Input and Select.