Color picker

Shows a select component.

Examples

Basic color input

Code

<template>
  <Color v-model="value" class="max-w-xs" />
</template>

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

const value = ref('#FF9500')
</script>

Vertical color input

Code

<template>
  <Color v-model="value" orientation="vertical" />
</template>

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

const value = ref('#FF9900')
</script>

Color picker

Code

<template>
  <ColorPicker v-model="value" class="max-w-xs" />
</template>

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

const value = ref('#FF9500')
</script>

Gradient

°

Code

<template>
  <div class="flex flex-col gap-10 items-center">
    <Gradient v-model="value" class="max-w-xs" />
    <div class="w-32 h-24 rounded-md" :style="{ backgroundImage: value }" />
  </div>
</template>

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

const value = ref('linear-gradient(90deg, #c03333 0%, #0000ff 100%)')
</script>