ComponentsCore
Pagination
A UI component that divides content into pages and provides navigation between them.
Example
Usage
Installation
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add paginationAnatomy
import {
Pagination,
PaginationItem,
PaginationPrevious,
PaginationNext,
} from "@/components/ui/core/pagination";<Pagination spacing="default" tone="default" size="default" radius="md">
<PaginationPrevious>Previous</PaginationPrevious>
<PaginationItem isActive>1</PaginationItem>
<PaginationItem>2</PaginationItem>
<PaginationItem>3</PaginationItem>
<PaginationItem>4</PaginationItem>
<PaginationEllipsis />
<PaginationNext>Next</PaginationNext>
</Pagination>Another Examples
Elipsis
Displays an ellipsis ("...") to indicate there are additional pages beyond what’s visible.
Usage
Props
Loading types…