Getting Started

UnoCSS Variants combines the power of UnoCSS with a first-class variant API.

Setup UnoCSS

UnoCSS Variants requires you to have UnoCSS installed in your project. If you haven't installed UnoCSS yet, you can follow the UnoCSS installation guide.

Installation

To use UnoCSS Variants in your project, you can install it as a dependency:

pnpm add -D eslint unocss-variants

npm install -D eslint unocss-variants

bun add -d eslint unocss-variants

Usage

<script setup>
import { uv } from 'unocss-variants';

const button = uv({
  base: 'font-medium bg-blue-500 text-white rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-purple-500 text-white'
    },
    size: {
      sm: 'text-sm',
      md: 'text-base',
      lg: 'px-4 py-3 text-lg'
    }
  },
  compoundVariants: [
    {
      size: ['sm', 'md'],
      class: 'px-3 py-1'
    }
  ],
  defaultVariants: {
    size: 'md',
    color: 'primary'
  }
});
</script>

<template>
  <button :class="button({ size: 'sm', color: 'secondary' })">
    Click me
  </button>
</template>

Introduction

Variants are a powerful feature of UnoCSS that allow you to modify or extend existing utility classes based on certain conditions or states.

Variants

Variants allows you to create multiple versions of the same component.