uno-variations

Work in progress: APIs can change before 1.0.0.

UnoCSS Variations a first-class variant API.

Full documentation: doc/README.md

Install

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

Requirements

• Node.js >=22
• pnpm 10.13.1

Development

nix develop
pnpm install
pnpm lint
pnpm typecheck
pnpm test --run
pnpm build

Usage

import { useUnoUi } from 'uno-variations'

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

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

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

License

MIT License © ChatonDeAru