---
title: "Overriding styles"
description: "Append extra classes at the call site with class or className. Nothing is dropped from the recipe."
canonical_url: "https://vinicunca.dev/unocss-variants/concepts/overriding-styles"
---
# Overriding styles

> Append extra classes at the call site with class or className. Nothing is dropped from the recipe.

## Single component

Pass `class` or `className` when you call the recipe. Both keys are equivalent; `uv` concatenates them after the recipe classes.

```vue
<template>
  <uv-button :uv="{
    base: 'font-semibold color-white py-1 px-3 rounded-full active:opacity-80',
    variants: {
      color: {
        primary: 'bg-blue-500 hover:bg-blue-700',
        secondary: 'bg-purple-500 hover:bg-purple-700',
        success: 'bg-green-500 hover:bg-green-700',
        error: 'bg-red-500 hover:bg-red-700'
      }
    }
  }" as="button" class="bg-pink-500 hover:bg-pink-500" color="secondary">
    <p>
      Button
    </p>
  </uv-button>
</template>
```

```ts
import { uv } from 'unocss-variants';

const button = uv({
  base: 'font-semibold color-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700',
      error: 'bg-red-500 hover:bg-red-700'
    }
  }
});

button({
  color: 'secondary',
  class: 'bg-pink-500 hover:bg-pink-500'
});
// font-semibold color-white py-1 px-3 rounded-full active:opacity-80 bg-purple-500 hover:bg-purple-700 bg-pink-500 hover:bg-pink-500
```

The secondary background is still in the string. To make pink win, prefix the override (or the variant) with `uno-layer-uv:` — see [Layers](https://vinicunca.dev/unocss-variants/concepts/layers).

```ts
uv({ base: 'px-4 py-2 rounded' })({ class: 'px-2 py-4 rounded-lg' });
// px-4 py-2 rounded px-2 py-4 rounded-lg
```

## Slots

Pass overrides to the slot function you want to change:

```vue
<template>
  <uv-slot-card :styles="{
    base: 'dark:bg-purple-800 bg-purple-100',
    name: 'dark:color-purple-200 color-purple-500',
    role: 'dark:color-purple-100'
  }" />
</template>
```

```vue
<script setup>
const { base, avatar, wrapper, description, infoWrapper, name, role } = card();
</script>

<template>
  <figure :class="base({ class: 'bg-purple-100 dark:bg-purple-800' })">
    <img
      :class="avatar()"
      src="/images/intro-avatar.png"
      alt=""
    >
    <div :class="wrapper()">
      <!-- ... -->
      <div :class="name({ class: 'color-purple-500 dark:color-purple-200' })">
        Ketut Gabler
      </div>
      <div :class="role({ class: 'dark:color-purple-100' })">
        Full-stack developer
      </div>
    </div>
  </figure>
</template>
```

```ts
base({ class: 'bg-purple-100 dark:bg-purple-800' });
// md:flex bg-background-muted rounded-xl p-8 md:p-0 bg-purple-100 dark:bg-purple-800

name({ class: 'color-purple-500 dark:color-purple-200' });
// text-sm color-sky-500 dark:color-sky-400 color-purple-500 dark:color-purple-200
```

Do not rely on `card({ class: '...' }).base()` — the root `class` is not applied to slots on the published 1.5.0 build. Call `base({ class: '...' })` instead.


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.