VueCraft NPM

Vue & React Integration ​

Vue 3 integration ​

All hooks return a ComputedRef<string> that reacts to Ref<> inputs. All hooks are SSR-safe — no DOM access occurs during computation.

Setup ​

ts
// main.ts
import { createApp } from 'vue'
import { VueGradientPlugin } from 'css-magic-gradient'
import App from './App.vue'

createApp(App).use(VueGradientPlugin).mount('#app')

Example ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  useLinearGradient,
  useMixedLinearGradient,
  useConicGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient'

const color = ref('#3498db')

const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
const mixed = useMixedLinearGradient(color, ref('#e74c3c'), 7)
const conic = useConicGradient(color, { hueRotation: true, steps: 12 })
const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
const tint = useTintGradient(color, 7)
const accessible = useAccessibleGradient(color, ref('#ffffff'), { targetLevel: 'AA' })
</script>

<template>
  <div :style="{ background: linear }">Linear</div>
  <div :style="{ background: tetradic }">Tetradic conic</div>
  <div :style="{ background: tint }">Tint</div>
  <div :style="{ background: accessible }">Accessible</div>
</template>

Vue hooks ​

HookReturnsDescription
useLinearGradient(first, options?)ComputedRef<string>Linear gradient from color or stops
useMultiStepLinearGradient(color, steps?, options?)ComputedRef<string>Multi-stop brightness gradient
useMixedLinearGradient(colorA, colorB, steps?, options?)ComputedRef<string>HSL-interpolated two-color gradient
useRadialGradient(color, options?)ComputedRef<string>Radial gradient
useConicGradient(color, options?)ComputedRef<string>Conic gradient
useRainbowConicGradient(options?)ComputedRef<string>Full-spectrum rainbow conic
useComplementaryGradient(color, options?)ComputedRef<string>Complementary harmony gradient
useTriadicGradient(color, options?)ComputedRef<string>Triadic harmony gradient
useAnalogousGradient(color, options?)ComputedRef<string>Analogous harmony gradient
useTetradicGradient(color, options?)ComputedRef<string>Tetradic harmony gradient (linear/radial/conic)
useSplitComplementaryGradient(color, options?)ComputedRef<string>Split-complementary harmony gradient
useTintGradient(color, steps?, options?)ComputedRef<string>Tint gradient (base → white)
useShadeGradient(color, steps?, options?)ComputedRef<string>Shade gradient (base → black)
useToneGradient(color, steps?, options?)ComputedRef<string>Tone gradient (base → gray)
useAccessibleGradient(color, textColor, options?)ComputedRef<string>Auto-adjusted WCAG-compliant gradient

Global properties (after VueGradientPlugin install) ​

ts
this.$useLinearGradient(color, options)
this.$useTetradicGradient(color, options)
this.$useTintGradient(color, steps, options)
this.$useAccessibleGradient(color, textColor, options)
// … all hooks available as $use* on the Vue instance

React integration ​

Import from css-magic-gradient/react. React is an optional peer dependency — the main bundle is unaffected. All hooks return a plain string memoized with useMemo, and are SSR-safe.

Example ​

tsx
import { useState } from 'react'
import {
  useLinearGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient/react'

export function GradientShowcase() {
  const [color, setColor] = useState('#3498db')

  const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
  const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
  const tint = useTintGradient(color, 7)
  const accessible = useAccessibleGradient(color, '#ffffff', { targetLevel: 'AA' })

  return (
    <div>
      <input type="color" value={color} onChange={(e) => setColor(e.target.value)} />
      <div style={{ background: linear, height: 80, borderRadius: 8 }} />
      <div style={{ background: tetradic, height: 80, borderRadius: 8 }} />
      <div style={{ background: tint, height: 80, borderRadius: 8 }} />
      <div style={{ background: accessible, height: 80, borderRadius: 8 }} />
    </div>
  )
}

React hooks ​

HookReturnsDescription
useLinearGradient(first, options?)stringLinear gradient from color or stops
useMultiStepLinearGradient(color, steps?, options?)stringMulti-stop brightness gradient
useMixedLinearGradient(colorA, colorB, steps?, options?)stringHSL-interpolated two-color gradient
useRadialGradient(color, options?)stringRadial gradient
useConicGradient(color, options?)stringConic gradient
useRainbowConicGradient(options?)stringFull-spectrum rainbow conic
useComplementaryGradient(color, options?)stringComplementary harmony gradient
useTriadicGradient(color, options?)stringTriadic harmony gradient
useAnalogousGradient(color, options?)stringAnalogous harmony gradient
useTetradicGradient(color, options?)stringTetradic harmony gradient (linear/radial/conic)
useSplitComplementaryGradient(color, options?)stringSplit-complementary harmony gradient
useTintGradient(color, steps?, options?)stringTint gradient (base → white)
useShadeGradient(color, steps?, options?)stringShade gradient (base → black)
useToneGradient(color, steps?, options?)stringTone gradient (base → gray)
useAccessibleGradient(color, textColor, options?)stringAuto-adjusted WCAG-compliant gradient