Skip to content

Interactive Documentation

UnoCSS comes up with a Playground and an Interactive Documentation.

This tutorial will guide you how to set it up and take advantage of them.


There is a playground that has already been set up for you to play with.

You can access it here .


To set up the interactive documentation, follow these steps:

  • Copy the below code
import { defineConfig, presetUno } from 'unocss'
import { presetAnimations } from 'unocss-preset-animations'

export default defineConfig({
  presets: [
      fillMode: 'both', // or whatever options you want
  • Head to the official Interactive Documentation
  • Click the icon in the top-right corner
  • Paste the above code into the editor and click OK
  • Enjoy 🥰

Released under the MIT License.