Pagination

A navigation system that helps users move through multiple pages of content.


Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/pagination/pagination.tsx
import * as Lucide from 'lucide-react'
import { Slot } from 'radix-ui'
import * as React from 'react'
import { ButtonProps, buttonStyles } from '#/components/button'
import { type PaginationStyles, paginationStyles } from './pagination.css'
 
const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => {
  const styles = paginationStyles()
  return <nav aria-label="pagination" className={styles.root({ className })} {...props} />
}
 
interface PaginationContentProps extends React.ComponentPropsWithoutRef<'ul'>, PaginationStyles {}
 
const PaginationContent = React.forwardRef<HTMLUListElement, PaginationContentProps>(
  ({ className, variant = 'default', ...props }: PaginationContentProps, forwardedRef) => {
    const styles = paginationStyles({ variant })
    return <ul ref={forwardedRef} className={styles.content({ className })} {...props} />
  }
)
 
const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
  ({ className, ...props }, forwardedRef) => {
    const styles = paginationStyles()
    return <li ref={forwardedRef} className={styles.item({ className })} {...props} />
  }
)
 
type PaginationLinkProps = {
  asChild?: boolean
  isActive?: boolean
} & Pick<ButtonProps, 'size'> &
  React.ComponentProps<'a'>
 
const PaginationLink = ({
  className,
  asChild,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => {
  const Comp = asChild ? Slot.Root : 'a'
  const styles = buttonStyles({ variant: isActive ? 'outline' : 'ghost' })
  return (
    <Comp
      aria-current={isActive ? 'page' : undefined}
      className={styles.base({ className })}
      {...props}
    />
  )
}
 
const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => {
  const styles = paginationStyles()
  return (
    <PaginationLink
      className={styles.previous({ className })}
      aria-label="Go to previous page"
      {...props}
    >
      <Lucide.ChevronLeft className={styles.previousIcon()} />
      <span>Previous</span>
    </PaginationLink>
  )
}
 
const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
  const styles = paginationStyles()
  return (
    <PaginationLink className={styles.next({ className })} aria-label="Go to next page" {...props}>
      <span>Next</span>
      <Lucide.ChevronRight className={styles.nextIcon()} />
    </PaginationLink>
  )
}
 
const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => {
  const styles = paginationStyles()
  return (
    <span aria-hidden className={styles.ellipsis({ className })} {...props}>
      <Lucide.MoreHorizontal className={styles.ellipsisIcon()} />
      <span className="sr-only">More pages</span>
    </span>
  )
}
 
Pagination.displayName = 'Pagination'
PaginationContent.displayName = 'PaginationContent'
PaginationItem.displayName = 'PaginationItem'
PaginationLink.displayName = 'PaginationLink'
PaginationPrevious.displayName = 'PaginationPrevious'
PaginationNext.displayName = 'PaginationNext'
PaginationEllipsis.displayName = 'PaginationEllipsis'
 
export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}

Usage

Imports

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

Example

Browse the Storybook for more examples.

Edit on GitHub

Last updated on

On this page