Pagination
A pagination with page navigation, next and previous links.
Pagination composes Base UI's useRender and mergeProps with the
Button variants, so every link can render as the router's own
anchor. PaginationLink marks the current page with aria-current='page', and
every part marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/paginationExample
pagination-example.tsx
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@/components/ui/pagination';
const PaginationExample = () => (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href='#' />
</PaginationItem>
<PaginationItem>
<PaginationLink href='#'>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href='#' isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href='#'>3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href='#' />
</PaginationItem>
</PaginationContent>
</Pagination>
);
export default PaginationExample;
Usage
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@/components/ui/pagination';
const PaginationDemo = () => (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href='#' />
</PaginationItem>
<PaginationItem>
<PaginationLink href='#'>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href='#' />
</PaginationItem>
</PaginationContent>
</Pagination>
);