Pagination

Pagination with page navigation, next and previous links.

Installation

npx @kosori/cli add components pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '~/components/ui/pagination';

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href='#' />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href='#'>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href='#' />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Next.js

By default the <PaginationLink /> component will render an <a /> tag. To use the Next.js <Link /> component, make the following updates to pagination.tsx.

+ import Link from 'next/link';
 
- type PaginationLinkProps = ... & React.ComponentProps<'a'>;
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>;
 
const PaginationLink = ({...props }: PaginationLinkProps) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
);

Pagination

Installation

Usage

Examples

Next.js

On this page