Hydration failed for Pagination Components

[Jahid-Unlock]

Newly introduced Pagination showing Hydration failed in NextJS 14. 

Component Stack li li ul nav div div div main

it's rendering li elements twice, I think it causing the error.

[sample-tayo]

I have the same error.

[dayongkr]

<Pagination>
        <PaginationContent>
          <PaginationLink href="#" isActive>
            1
          </PaginationLink>
          <PaginationLink href="#">2</PaginationLink>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationContent>
</Pagination>

You have to write like this.

// pagination.tsx
const PaginationLink = ({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => (
  <PaginationItem>
    <a
      aria-current={isActive ? 'page' : undefined}
      className={cn(
        buttonVariants({
          variant: isActive ? 'outline' : 'ghost',
          size
        }),
        className
      )}
      {...props}
    />
  </PaginationItem>
)

Because PaginationLink component was wrapped by PaginationItem Component (this Component is li element).

[sample-tayo]

<Pagination>
        <PaginationContent>
          <PaginationLink href="#" isActive>
            1
          </PaginationLink>
          <PaginationLink href="#">2</PaginationLink>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationContent>
</Pagination>

You have to write like this.

// pagination.tsx
const PaginationLink = ({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => (
  <PaginationItem>
    <a
      aria-current={isActive ? 'page' : undefined}
      className={cn(
        buttonVariants({
          variant: isActive ? 'outline' : 'ghost',
          size
        }),
        className
      )}
      {...props}
    />
  </PaginationItem>
)

Because PaginationLink component was wrapped by PaginationItem Component (this Component is li element).

Thank you, worked.

[TakuSemba]

I think the documentation can be updated on this. The code snippet uses </PaginationItem> which leads to this issue

https://ui.shadcn.com/docs/components/pagination