---
title: "Getting Started"
description: "Install @vinicunca/unocss-preset, an opinionated UnoCSS preset with wind4, icons, fluid sizing, enter/exit animations, and optional scrollbars and Magic CSS."
canonical_url: "https://vinicunca.dev/unocss-preset/getting-started"
---
# Getting Started

> Install @vinicunca/unocss-preset, an opinionated UnoCSS preset with wind4, icons, fluid sizing, enter/exit animations, and optional scrollbars and Magic CSS.

`@vinicunca/unocss-preset` is Vinicunca's UnoCSS preset. It bundles [presetWind4](https://unocss.dev/presets/wind4), [presetIcons](https://unocss.dev/presets/icons), a CSS reset, fluid sizing, and enter/exit animations. Scrollbars, Magic CSS, typography, and web fonts are opt-in.

## Installation

```bash [pnpm]
pnpm add -D unocss @vinicunca/unocss-preset
```

```bash [npm]
npm install -D unocss @vinicunca/unocss-preset
```

```bash [bun]
bun add -d unocss @vinicunca/unocss-preset
```

## Usage

Add the preset to `uno.config.ts`:

```ts [uno.config.ts]
import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca()
  ]
});
```

You do not add `presetWind4` or `presetIcons` yourself. `presetVinicunca()` already includes them.

## Usage with Pohon UI, Nuxt, and Vite

### Pohon UI

[Pohon UI](https://vinicunca.dev/pohon/getting-started) already depends on this preset. Create `uno.config.ts` with `presetVinicunca()` and let Pohon register UnoCSS:

```ts [uno.config.ts]
import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [presetVinicunca()]
});
```

That is the same setup as [Pohon on Nuxt](https://vinicunca.dev/pohon/getting-started/installation/nuxt) and [Pohon on Vue](https://vinicunca.dev/pohon/getting-started/installation/vue). This docs hub extends the theme with extra accordion and toast keyframes; you only need that if you copy those animations.

### Nuxt

Install `@unocss/nuxt` (Pohon already registers it) and keep the same `uno.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@unocss/nuxt']
});
```

### Vite

Add the Vite plugin and import the virtual CSS entry:

```ts [vite.config.ts]
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    UnoCSS(),
    vue()
  ]
});
```

```ts [src/main.ts]
import 'virtual:uno.css';
```

## What's included

### Preflights

When `preflights` is `true` (the default), the preset injects a CSS reset on the `preflights` layer. It is the stylesheet in [`src/core/preflights/reset.ts`](https://github.com/vinicunca/unocss-preset-vinicunca/blob/v2.4.0/src/core/preflights/reset.ts). Wind4's own reset is turned off so the two do not stack.

The reset uses `--default-font-family` / `--default-font-featureSettings`, `border: 0 solid`, `-webkit-font-smoothing: antialiased`, and `[hidden]:where(:not([hidden~='until-found']))`. Placeholders inherit a faded `currentcolor` via `color-mix`; they are not hard-coded gray.

Disable it with:

```ts [uno.config.ts]
presetVinicunca({
  preflights: false
});
```

### Presets

| Preset | Enabled | Notes |
| --- | --- | --- |
| [presetWind4](https://unocss.dev/presets/wind4) | Yes | Default `{ preflights: { reset: false } }` |
| [presetIcons](https://unocss.dev/presets/icons) | Yes | Pass an object to configure collections |
| [presetAnimation](https://vinicunca.dev/unocss-preset/animations) | Yes | `animate-in` / `animate-out` |
| [presetFluid](https://vinicunca.dev/unocss-preset/fluid) | Yes | `fluid-` utilities |
| [presetTypography](https://unocss.dev/presets/typography) | No | `typography: true` |
| [presetWebFonts](https://unocss.dev/presets/web-fonts) | No | `webFonts: true` |
| [presetScrollbar](https://vinicunca.dev/unocss-preset/scrollbar) | No | `scrollbar: true` |
| [presetMagicss](https://vinicunca.dev/unocss-preset/magic-css) | No | `magicCss: true` |

There is no `wind3` preset and no Akar preset. Akar support was removed in v2.1.0.

### Transformers

Directives and variant groups are on by default. The alias transformer is opt-in.

| Transformer | Enabled | Notes |
| --- | --- | --- |
| [transformerDirectives](https://unocss.dev/transformers/directives) | Yes | `@apply`, `@screen`, `theme()` |
| [transformerVariantGroup](https://unocss.dev/transformers/variant-group) | Yes | `hover:(bg-red color-white)` |
| [transformerAlias](https://vinicunca.dev/unocss-preset/getting-started/options#alias) | No | Expand shortcuts with `*` / `+` prefixes |

## Extract color channels

Set `unColor` to extract the RGB channels of generated colors into a CSS variable so you can reuse them with opacity:

```ts [uno.config.ts]
presetVinicunca({
  unColor: true // writes --un-color
});
```

Pass a string to choose the variable name: `unColor: '--my-color'`. `true` and `'--un-color'` are equivalent. See [Options](https://vinicunca.dev/unocss-preset/getting-started/options#uncolor).

## Next

[**Options**](https://vinicunca.dev/unocss-preset/getting-started/options)

Every `presetVinicunca` option with types and real defaults.

[**Theme**](https://vinicunca.dev/unocss-preset/getting-started/theme)

Add keyframes and animations through `extendedTheme`.

[**Fluid**](https://vinicunca.dev/unocss-preset/fluid)

Viewport-scaled type, spacing, and layout without breakpoints.

[**Animations**](https://vinicunca.dev/unocss-preset/animations)

Enter and exit animations with fade, zoom, spin, and slide.

---

- [GitHub](https://github.com/vinicunca/unocss-preset-vinicunca)
- [npm](https://www.npmjs.com/package/@vinicunca/unocss-preset)


## Sitemap

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