Components
Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, supports per-page aria-labels, an onChange handler and both controlled and uncontrolled page state.
npx @21st-dev/cli add reshaped/reshaped-paginationLoading preview...
import { Reshaped } from "reshaped/bundle";
import Pagination from "@/components/ui/reshaped-pagination";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<Pagination
total={10}
page={5}
previousAriaLabel="Previous page"
nextAriaLabel="Next page"
/>
</div>
</Reshaped>
);
}