Usage

Setup

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca({
      akar: true,
    }),
  ],
});

Options

All properties are optional.

brands

Define brand colors for Akar

• Type: Record<string, string>
• Default:

brands: {
  primary: 'purple',
  secondary: 'blue',
  success: 'green',
  info: 'blue',
  warning: 'yellow',
  error: 'red',
  neutral: 'slate',
}

enableDynamicBrands

When defining the brand colors, we use the colors from unocss/preset-wind4 theme by default.

If we want to use custom colors that are not in the preset-wind4 theme, you can enable this option. One use case is when we have a static brand color (primary will always be one value) then we don't need to use this option.

Another use case is when we want the brand colors to be dynamic by using css variables, then we can enable this option to generate the brand colors dynamically.

It's better to dive into the source code directly to understand how it works.

• Type: boolean
• Default: false

enableDrawer

Enable the drawer preflight styles, this is to support the animations for the drawer component in Akar.

• Type: boolean
• Default: true

animation

• Type: Record<string, string>
• Default: Refer to features

keyframes

• Type: Record<string, CssKeyframesRule>
• Default: Refer to features