diff --git a/src/use-click-outside/demo.tsx b/src/use-click-outside/demo.tsx
index 885d9177..e5257138 100644
--- a/src/use-click-outside/demo.tsx
+++ b/src/use-click-outside/demo.tsx
@@ -3,7 +3,7 @@ import { useClickOutside, useCounter } from '@shined/use'
 import { useRef } from 'react'
 
 const cls =
-  'px-4 size-60px rounded text-white flex items-center justify-center cursor-pointer select-none hover:opacity-80 active:opacity-96 transition'
+  'px-4 size-60px rounded text-white flex items-center justify-center cursor-pointer select-none hover:opacity-96 active:opacity-80 transition'
 
 export function App() {
   const [count, actions] = useCounter(0)
diff --git a/src/use-css-var/index.ts b/src/use-css-var/index.ts
index c19e1a46..40f929c3 100644
--- a/src/use-css-var/index.ts
+++ b/src/use-css-var/index.ts
@@ -33,7 +33,7 @@ export function useCssVar<T extends HTMLElement = HTMLElement>(
   const { defaultValue = '', observe = false } = options
 
   const [variable, _setVariable] = useSafeState(
-    ensureSSRSecurity(() => getCssVar(unwrapGettable(propName), defaultValue), defaultValue),
+    ensureSSRSecurity(() => getCssVar(unwrapGettable(propName), target, defaultValue), defaultValue),
   )
 
   const el = useTargetElement<T>(target)