Personizely UI

Appearance

Color picker ​

Shows a select component.

Examples ​

Basic color input ​

Code

vue
<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

vue
<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

vue
<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>