Pagination | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/pagination

pnpm dlx shadcn@latest add @cortexcn/pagination

Usage

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/pagination";

Examples

Basic

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/pagination"

export function PaginationBasic() {
  return (
    <div className="flex flex-col gap-6">
      <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>
    </div>
  )
}

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/pagination"export function PaginationBasic() {  return (    <div className="flex flex-col gap-6">      <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>    </div>  )}

Simple

import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/pagination"

export function PaginationSimple() {
  return (
    <div className="flex flex-col gap-6">
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">4</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">5</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/pagination"export function PaginationSimple() {  return (    <div className="flex flex-col gap-6">      <Pagination>        <PaginationContent>          <PaginationItem>            <PaginationLink href="#">1</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#" isActive>              2            </PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">3</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">4</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#">5</PaginationLink>          </PaginationItem>        </PaginationContent>      </Pagination>    </div>  )}

With select

Rows per page

import { Field, FieldLabel } from "@/components/field"
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/pagination"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function PaginationIconsOnly() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between gap-4">
        <Field orientation="horizontal" className="w-fit">
          <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
          <Select defaultValue="25">
            <SelectTrigger className="w-20" id="select-rows-per-page">
              <SelectValue />
            </SelectTrigger>
            <SelectContent align="start">
              <SelectGroup>
                <SelectItem value="10">10</SelectItem>
                <SelectItem value="25">25</SelectItem>
                <SelectItem value="50">50</SelectItem>
                <SelectItem value="100">100</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>
        <Pagination className="mx-0 w-auto">
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/pagination"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function PaginationIconsOnly() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center justify-between gap-4">        <Field orientation="horizontal" className="w-fit">          <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>          <Select defaultValue="25">            <SelectTrigger className="w-20" id="select-rows-per-page">              <SelectValue />            </SelectTrigger>            <SelectContent align="start">              <SelectGroup>                <SelectItem value="10">10</SelectItem>                <SelectItem value="25">25</SelectItem>                <SelectItem value="50">50</SelectItem>                <SelectItem value="100">100</SelectItem>              </SelectGroup>            </SelectContent>          </Select>        </Field>        <Pagination className="mx-0 w-auto">          <PaginationContent>            <PaginationItem>              <PaginationPrevious href="#" />            </PaginationItem>            <PaginationItem>              <PaginationNext href="#" />            </PaginationItem>          </PaginationContent>        </Pagination>      </div>    </div>  )}

Adapted from the shadcn/ui Pagination (MIT).