ComponentsNavigation
Pagination
Page numbers with previous and next buttons, folding long runs into an ellipsis.
Default
"use client";
import { useState } from "react";
import { Pagination } from "@/components/miyuki-ui/pagination";
export default function PaginationDemo() {
const [page, setPage] = useState(3);
return <Pagination page={page} onChange={setPage} total={20} />;
}Compact
"use client";
import { Pagination } from "@/components/miyuki-ui/pagination";
export default function PaginationCompactDemo() {
return <Pagination variant="compact" defaultPage={3} total={20} />;
}Install
npx shadcn@latest add @miyuki-ui/paginationThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
Pagination
Prop
Type
Nav Pill
A pill of links that floats at the top of the page, steps away while you scroll down and returns when you scroll up.
Ridge Progress
A thin band across the top of the page with a mountain ridge in silhouette that fills with water as you read, a marker that climbs the ridgeline and a flag that waves once at the summit.