Components
Pagination
Navigation for paginated content.
Pagination renders a navigation control for paginated content, with previous and next links and numbered pages.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/pagination.jsonUsage
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
export default function Example() {
return (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Paginationdata-slot="pagination" | <nav>HTML | — |
PaginationContentdata-slot="pagination-content" | <ul>HTML | — |
PaginationItemdata-slot="pagination-item" | <li>HTML | — |
PaginationLinkdata-slot="pagination-link" | <a>HTML |
|
PaginationPrevious | PaginationLinkFaber UI |
|
PaginationNext | PaginationLinkFaber UI |
|
PaginationEllipsisdata-slot="pagination-ellipsis" | <span>HTML | — |
Changelog
Full Pagination historyLast updated on