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
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