---
URL: "/guide/unocss/examples"
LLMS_URL: "/guide/unocss/examples.md"
---

# `@svaio/unocss` - Examples

## Simple Usage

### vite.config.js

```js
import unocss             from '@svaio/unocss'
import {
	presetWind3,
	extractorSvelte,
	transformerDirectives,
} from '@svaio/unocss/utils'
import { sveltekit }    from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig( { plugins : [
	unocss( {
		presets      : [ presetWind3() ],
		extractors   : [ extractorSvelte() ],
		transformers : [ transformerDirectives() ],
	} ),
	sveltekit(),
] } )

```

### src/routes/+layout.svelte

```svelte
<script>
	import { Utils } from '@svaio/unocss/svelte'
</script>

<Utils />

```



## Manual Usage

### vite.config.js

```js
import unocss             from '@svaio/unocss'
import {
	presetWind3,
	extractorSvelte,
	transformerDirectives,
} from '@svaio/unocss/utils'
import { sveltekit }    from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig( { plugins : [
	unocss( {
		presets      : [ presetWind3() ],
		extractors   : [ extractorSvelte() ],
		transformers : [ transformerDirectives() ],
	} ),
	sveltekit(),
] } )

```

### src/routes/+layout.svelte

```svelte
<script>
	import 'uno.css'
</script>

<!-- svelte content -->

```