"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react"; import type * as React from "react"; import { cn } from "@/registry/default/lib/utils"; import { type Button, buttonVariants } from "@/registry/default/ui/button"; export function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.ReactElement { return (

); } export function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.ReactElement { return (

; } export type PaginationLinkProps = { isActive?: boolean; size?: React.ComponentProps["size"]; } & useRender.ComponentProps<"a">; export function PaginationLink({ className, isActive, size = "icon", render, ...props }: PaginationLinkProps): React.ReactElement { const defaultProps = { "aria-current": isActive ? ("page" as const) : undefined, className: render ? className : cn( buttonVariants({ size, variant: isActive ? "outline" : "ghost", }), className, ), "data-active": isActive, "data-slot": "pagination-link", }; return useRender({ defaultTagName: "a", props: mergeProps<"a">(defaultProps, props), render, }); } export function PaginationPrevious({ className, ...props }: React.ComponentProps): React.ReactElement { return ( Previous ); } export function PaginationNext({ className, ...props }: React.ComponentProps): React.ReactElement { return ( Next ); } export function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.ReactElement { return ( More pages ); }

Pagination

Instalação

Registry dependencies