Skip to content


Autocomplete utilities for UnoCSS: @unocss/autocomplete. This is embedded in the playground and the VS Code extension.


Static rules

Static rules like this will just work without any configuration.

rules: [
  ['flex', { display: 'flex' }]

Dynamic rules

For dynamic rules, you can provide an extra meta object to the rule and specify the autocomplete template.

rules: [
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- this

The template uses a simple DSL to specify the autocomplete suggestions. The syntax is:

  • (...|...): logic OR groups using | as the separator. It will be used as suggestions when some of the groups match.
  • <...>: built-in shorthands. Currently supports <num>, <percent> and <directions>
  • $...: theme inferring. For example $colors will list all the properties of the colors object of the theme.


Example 1

  • Template: (border|b)-(solid|dashed|dotted|double|hidden|none)
  • Input: b-do
  • Suggestions: b-dotted, b-double

Example 2

  • Template: m-<num>
  • Input: m-
  • Suggestions: m-1, m-2, m-3

Example 3

  • Template: text-$colors
  • Input: text-r
  • Suggestions: text-red, text-rose

Example 4

For multiple templates:

  • Template: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
  • Input: b-
  • Suggestions: b-x, b-y, b-1, b-2
  • Input: b-x-
  • Suggestions: b-x-1, b-x-2


Released under the MIT License.