shipbase/ui

import {
  Pagination,
  PaginationContext,
  PaginationEllipsis,
  PaginationItem,
  PaginationNextTrigger,
  PaginationPrevTrigger,
} from "@/components/ui/pagination"

export default function PaginationDemo() {
  return (
    <Pagination count={100}>
      <PaginationPrevTrigger />
      <PaginationContext>
        {(context) =>
          context.pages.map((page, index) =>
            page.type === "page" ? (
              <PaginationItem key={index} {...page}>
                {page.value}
              </PaginationItem>
            ) : (
              <PaginationEllipsis key={index} index={index} />
            )
          )
        }
      </PaginationContext>
      <PaginationNextTrigger />
    </Pagination>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { Pagination as PaginationPrimitive } from "@ark-ui/react/pagination"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { type ButtonProps, buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const PaginationContext = PaginationPrimitive.Context

const Pagination = React.forwardRef<
  React.ElementRef<typeof PaginationPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Root>
>(({ className, ...props }, ref) => (
  <PaginationPrimitive.Root
    className={cn(
      "mx-auto flex w-full flex-row items-center justify-center gap-1",
      className
    )}
    {...props}
    ref={ref}
  />
))
Pagination.displayName = PaginationPrimitive.Root.displayName

const PaginationItem = React.forwardRef<
  React.ElementRef<typeof PaginationPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Item>
>(({ className, ...props }, ref) => (
  <PaginationContext>
    {(context) => (
      <PaginationPrimitive.Item
        className={cn(
          buttonVariants({
            variant: context.page === props.value ? "outline" : "ghost",
            size: "icon",
          }),
          className
        )}
        {...props}
        ref={ref}
      />
    )}
  </PaginationContext>
))
PaginationItem.displayName = PaginationPrimitive.Item.displayName

const PaginationPrevTrigger = React.forwardRef<
  React.ElementRef<typeof PaginationPrimitive.PrevTrigger>,
  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.PrevTrigger> &
    Pick<ButtonProps, "size">
>(({ className, size = "default", ...props }, ref) => (
  <PaginationPrimitive.PrevTrigger
    className={cn(
      buttonVariants({ variant: "ghost", size }),
      "gap-1 pl-2.5",
      className
    )}
    {...props}
    ref={ref}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationPrimitive.PrevTrigger>
))
PaginationPrevTrigger.displayName = PaginationPrimitive.PrevTrigger.displayName

const PaginationNextTrigger = React.forwardRef<
  React.ElementRef<typeof PaginationPrimitive.NextTrigger>,
  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.NextTrigger> &
    Pick<ButtonProps, "size">
>(({ className, size = "default", ...props }, ref) => (
  <PaginationPrimitive.NextTrigger
    className={cn(
      buttonVariants({ variant: "ghost", size }),
      "gap-1 pr-2.5",
      className
    )}
    {...props}
    ref={ref}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationPrimitive.NextTrigger>
))
PaginationNextTrigger.displayName = PaginationPrimitive.NextTrigger.displayName

const PaginationEllipsis = React.forwardRef<
  React.ElementRef<typeof PaginationPrimitive.Ellipsis>,
  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Ellipsis>
>(({ className, ...props }, ref) => (
  <PaginationPrimitive.Ellipsis
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
    ref={ref}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </PaginationPrimitive.Ellipsis>
))
PaginationEllipsis.displayName = PaginationPrimitive.Ellipsis.displayName

export {
  Pagination,
  PaginationContext,
  PaginationEllipsis,
  PaginationItem,
  PaginationNextTrigger,
  PaginationPrevTrigger,
}

Not Found

Update the import paths to match your project setup.

Usage

import {
  Pagination,
  PaginationContext,
  PaginationEllipsis,
  PaginationItem,
  PaginationNextTrigger,
  PaginationPrevTrigger,
} from "@/components/ui/pagination"

<Pagination count={100}>
  <PaginationPrevTrigger />
  <PaginationContext>
    {(context) =>
      context.pages.map((page, index) =>
        page.type === "page" ? (
          <PaginationItem key={index} {...page}>
            {page.value}
          </PaginationItem>
        ) : (
          <PaginationEllipsis key={index} index={index} />
        )
      )
    }
  </PaginationContext>
  <PaginationNextTrigger />
</Pagination>