The Pagination component provides an elegant, accessible pagination controls with smooth motion animations, multiple visual styles, and extensive color variants.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/pagination.json
Examples
Basic Usage
Simple pagination with default styling.
Style Variants
Explore different visual styles available in the component.
Solid
Outline
Ghost
Squircle
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
totalPages | number | — | Total number of pages. Required. |
currentPage | number | — | Current active page (1-indexed). Required. |
onPageChange | (page: number) => void | — | Callback when page changes. Required. |
siblingCount | number | 1 | Number of sibling pages to show around current page. |
color | PaginationColor | "default" | Color variant for the active page. Options: default, blue, purple, pink, red, orange, green, teal, cyan, indigo, violet, rose, amber, lime, sky, emerald, fuchsia. |
variant | PaginationVariant | "solid" | Visual style variant. Options: solid, outline, ghost, squircle. |
showEdges | boolean | false | Show first/last page buttons with double chevrons. |
size | "sm" | "md" | "lg" | "md" | Size of pagination buttons. |
className | string | — | Additional CSS classes for the pagination container. |
Hook
usePaginationState
A convenience hook for pagination state management.
const { page, setPage, nextPage, prevPage, resetPage } = usePaginationState(1);