Gradient Picker

Copy<script setup lang="ts">
import { ref } from 'vue'
import { GradientPicker } from '@/components/ui/gradient-picker'

const gradient = ref('linear-gradient(90deg, #6366F1 0%, #22D3EE 50%, #EC4899 100%)')
</script>

<template>
  <div class="w-full max-w-sm space-y-3">
    <GradientPicker v-model="gradient" />

    <div
      class="border-border/60 flex h-24 items-end rounded-lg border p-2"
      :style="{ backgroundImage: gradient }"
    >
      <code class="bg-popover/98 text-muted-foreground rounded-md border border-border/60 px-2 py-0.5 font-mono text-xs/relaxed shadow-lg">
        {{ gradient }}
      </code>
    </div>
  </div>
</template>

Installation

pnpmnpmyarnbun
pnpm dlx hui-kit@latest add gradient-picker
Copy

Usage

Copy<script setup lang="ts">
import { ref } from 'vue'
import { GradientPicker } from '@/components/ui/gradient-picker'

const gradient = ref('linear-gradient(90deg, #6366F1 0%, #EC4899 100%)')
</script>

<template>
  <GradientPicker v-model="gradient" />
</template>

v-model carries the finished CSS string, so it drops straight into any background-image. A value passed in is parsed back into type, angle, and stops when it matches the picker's own output format.

Interactions

• Track — click empty space to insert a stop (its color is interpolated between neighbors); clicking near an existing stop just selects it.
• Stops — drag to reposition; the selected stop's color and position are edited in the row below, and removed with the trailing button (minimum of two stops).
• Toolbar — segmented linear/radial toggle; the angle slider appears for linear gradients only.

The output always lists stops sorted by position with integer percentages:

Copy'radial-gradient(circle, #6366F1 0%, #EC4899 50%, #F59E0B 100%)'