Pagination

Open-code aq-ui accessible component family for Pagination.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add pagination

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

import { Pagination } from "@/components/ui/pagination"

<Pagination />

Pagination

constSource L14

Open-code aq-ui accessible component family for Pagination.

const Pagination = React.forwardRef<React.ComponentRef<"nav">, React.ComponentProps<"nav">>(…)

Props type: React.ComponentProps<"nav">

PaginationContent

constSource L31

Content export for composing Pagination.

const PaginationContent = React.forwardRef<React.ComponentRef<"ul">, React.ComponentProps<"ul">>(…)

Props type: React.ComponentProps<"ul">

PaginationEllipsis

constSource L154

Public const export from Pagination.

const PaginationEllipsis = React.forwardRef<React.ComponentRef<"span">, React.ComponentProps<"span">>(…)

Props type: React.ComponentProps<"span">

PaginationItem

constSource L46

Item export for composing Pagination.

const PaginationItem = React.forwardRef<React.ComponentRef<"li">, React.ComponentProps<"li">>(…)

Props type: React.ComponentProps<"li">

PaginationLink

constSource L60

Public const export from Pagination.

const PaginationLink = React.forwardRef<React.ComponentRef<"a">, PaginationLinkProps>(…)

Props type: PaginationLinkProps

PaginationLinkProps

typeSource L54

Type contract for PaginationLinkProps.

type PaginationLinkProps = { … } & Pick<ButtonProps, "size"> & React.ComponentProps<"a">

Members

Name	Type	Default
`disabled?`	`boolean`	`false`
`isActive?`	`boolean`	`—`

PaginationNext

constSource L135

Public const export from Pagination.

const PaginationNext = React.forwardRef<React.ComponentRef<typeof PaginationLink>, React.ComponentProps<typeof PaginationLink> & { text?: string }>(…)

Props type: React.ComponentProps<typeof PaginationLink> & { text?: string }

Props

Name	Type	Default
`text?`	`string`	`"Next"`

PaginationPrevious

constSource L116

Public const export from Pagination.

const PaginationPrevious = React.forwardRef<React.ComponentRef<typeof PaginationLink>, React.ComponentProps<typeof PaginationLink> & { text?: string }>(…)

Props type: React.ComponentProps<typeof PaginationLink> & { text?: string }

Props

Name	Type	Default
`text?`	`string`	`"Previous"`

Registry dependencies

button, utils

Package dependencies

lucide-react@^1.31.0

Files

components/ui/pagination.tsx