uno-variations

🚧 Work In Progress - the API is going to move a lot. Use the lib only if you want to help in his development.

UnoCSS Variations a first-class variant API.

Install

pnpm add uno-variations --save-catalog-name prod

Usage

import { useUnoUi } from 'uno-variations'

const props = defineProps<{
  class?: any
  state: 'default' | 'error' | 'success'
}>()

const { uu } = useUnoUi({
  form: {
    base: 'flex flex-col gap-4 border-1',
    variations: {
      state: {
        default: 'border-grey',
        error: 'border-red',
        success: 'border-green',
      },
    },
    default: {
      state: 'default'
    }
  },
}, computed(() => ({
  state: props.state,
})))

<form :class="uu.form({ classes: props.class })">
  <!-- ... -->
</form>

License

MIT License © ChatonDeAru