diff --git a/packages/dify-ui/src/avatar/index.tsx b/packages/dify-ui/src/avatar/index.tsx
index 8cf893fbbd..83360068f4 100644
--- a/packages/dify-ui/src/avatar/index.tsx
+++ b/packages/dify-ui/src/avatar/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type { ImageLoadingStatus } from '@base-ui/react/avatar'
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar'
 import { cn } from '../cn'
diff --git a/packages/dify-ui/src/button/index.tsx b/packages/dify-ui/src/button/index.tsx
index a7f82fe468..2181b880a5 100644
--- a/packages/dify-ui/src/button/index.tsx
+++ b/packages/dify-ui/src/button/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type { Button as BaseButtonNS } from '@base-ui/react/button'
 import type { VariantProps } from 'class-variance-authority'
 import { Button as BaseButton } from '@base-ui/react/button'
diff --git a/packages/dify-ui/src/internals/use-iso-layout-effect.ts b/packages/dify-ui/src/internals/use-iso-layout-effect.ts
index 682e13f9e5..44bf4fb937 100644
--- a/packages/dify-ui/src/internals/use-iso-layout-effect.ts
+++ b/packages/dify-ui/src/internals/use-iso-layout-effect.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 const noop: typeof React.useLayoutEffect = () => {}
diff --git a/packages/dify-ui/src/pagination/index.tsx b/packages/dify-ui/src/pagination/index.tsx
index f42c689b8e..386017828c 100644
--- a/packages/dify-ui/src/pagination/index.tsx
+++ b/packages/dify-ui/src/pagination/index.tsx
@@ -483,9 +483,8 @@ export function PaginationPage({
       aria-current={current ? 'page' : undefined}
       aria-label={ariaLabel ?? (current ? `Page ${page}, current page` : `Go to page ${page}`)}
       className={cn(
-        'inline-flex h-8 min-w-8 touch-manipulation items-center justify-center rounded-lg px-1 py-2 system-sm-medium tabular-nums text-text-tertiary outline-hidden transition-colors hover:bg-components-button-ghost-bg-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid',
+        'inline-flex h-8 min-w-8 touch-manipulation items-center justify-center rounded-lg px-1 py-2 system-sm-medium tabular-nums text-text-tertiary outline-hidden hover:bg-components-button-ghost-bg-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid',
         current && 'bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover',
-        'motion-reduce:transition-none',
         className,
       )}
       onClick={(event) => {