Components
Loading preview...
This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is represented by an icon or mini preview, giving users a clear visual cue of the content. The active page is highlighted with scale, color, and border effects, making it instantly recognizable. For large numbers of pages, the component intelligently uses ellipsis (...) to keep the interface compact while still showing nearby pages and first/last pages. Hovering over an icon displays a tooltip, providing additional context for that page. Navigation is made easy with previous and next arrows, and a built-in onChange callback allows the parent app to track the current page. Fully light and dark theme compatible, this component is ideal for modern dashboards, creative apps, or any interface where a visual, intuitive pagination system enhances user experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/icon-paginationimport IconPagination from "@/components/ui/icon-pagination";
export default function DemoOne() {
return <IconPagination />;
}