Pagination

Installation#

1. Install the dependencies

   npm install cn lucide-react

2. Copy the source into your project

   components/ui/pagination.tsx

   import * as React from "react"import { cn } from "cn"import { Button } from "@/components/ui/button"import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"function Pagination({ className, ...props }: React.ComponentProps<"nav">) {  return (    <nav      role="navigation"      aria-label="pagination"      data-slot="pagination"      className={cn("mx-auto flex w-full justify-center", className)}      {...props}    />  )}function PaginationContent({  className,  ...props}: React.ComponentProps<"ul">) {  return (    <ul      data-slot="pagination-content"      className={cn("flex items-center gap-0.5", className)}      {...props}    />  )}function PaginationItem({ ...props }: React.ComponentProps<"li">) {  return <li data-slot="pagination-item" {...props} />}type PaginationLinkProps = {  isActive?: boolean} & Pick<React.ComponentProps<typeof Button>, "size"> &  React.ComponentProps<"a">function PaginationLink({  className,  isActive,  size = "icon",  ...props}: PaginationLinkProps) {  return (    <Button      asChild      variant={isActive ? "outline" : "ghost"}      size={size}      className={cn(className)}    >      <a        aria-current={isActive ? "page" : undefined}        data-slot="pagination-link"        data-active={isActive}        {...props}      />    </Button>  )}function PaginationPrevious({  className,  text = "Previous",  ...props}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {  return (    <PaginationLink      aria-label="Go to previous page"      size="default"      className={cn("pl-1.5!", className)}      {...props}    >      <ChevronLeftIcon data-icon="inline-start" />      <span className="hidden sm:block">{text}</span>    </PaginationLink>  )}function PaginationNext({  className,  text = "Next",  ...props}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {  return (    <PaginationLink      aria-label="Go to next page"      size="default"      className={cn("pr-1.5!", className)}      {...props}    >      <span className="hidden sm:block">{text}</span>      <ChevronRightIcon data-icon="inline-end" />    </PaginationLink>  )}function PaginationEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      aria-hidden      data-slot="pagination-ellipsis"      className={cn(        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",        className      )}      {...props}    >      <MoreHorizontalIcon      />      <span className="sr-only">More pages</span>    </span>  )}export {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,}

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#