On This Page
Use the package manager of your choice.
npm install --save-dev ato-ui
pnpm add -D ato-ui
We also rely on a few dependencies, so make sure they are also installed.
npm install --save-dev unocss @unocss/transformer-variant-group @unocss/transformer-directives @unocss/preset-icons @unocss/reset @unocss/preset-wind
pnpm add -D unocss @unocss/transformer-variant-group @unocss/transformer-directives @unocss/preset-icons @unocss/reset @unocss/preset-wind
Create a uno.config.ts
file with all the required presets and transformers.
import { defineConfig } from 'unocss';
import presetWind from '@unocss/preset-wind';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import transformerDirectives from '@unocss/transformer-directives';
import presetIcons from '@unocss/preset-icons';
import { presetAtoUI } from 'ato-ui/preset';
export default defineConfig({
presets: [
presetIcons({
extraProperties: {
display: 'inline-block',
'vertical-align': 'middle'
}
}),
presetWind(),
presetAtoUI()
],
transformers: [transformerVariantGroup(), transformerDirectives()]
});
uno.config.ts Set up your vite.config.ts
file, by importing UnoCSS and passing it the location of the config file.
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';
export default defineConfig({
plugins: [sveltekit(), UnoCSS()]
});
vite.config.ts Next we need to setup the root +layout.svelte
file by importing uno.css
. You can also do style resetting like tailwind does. You can then import a theme from ato-ui/themes/...
or use a custom one that you created in our designer page. The theme should be added as a data-theme
attribute, with the same name as the css file name, so make sure to add it to a wrapping div
, as well as in the top level app.html
file. This is important because some floating elements might be rendered outside of the below div
element.
You can see all our themes in our styles repo page .
<script lang="ts">
// Import your theme here.
import 'ato-ui/themes/ato.css';
import '@unocss/reset/tailwind.css';
import 'uno.css';
</script>
<div data-theme="ato">
<slot />
</div>
./src/routes/+layout.svelte <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="ato">
<div>%sveltekit.body%</div>
</body>
</html>
./src/app.html We recommend installing a few VSCode extensions to make the development experience more enjoyable: the Unocss extension and the Iconify Intellisense extension . If you have the Tailwind extension installed you probably also want to disable it for projects in which you are using UnoCSS, since the extensions might not work together well.