unocss-preset-primitives

Utilities and variants for styling headlessui radix-ui kobalte state or custom one

npm i -D unocss-preset-primitives

Demo

You can find the code inside the playground folder.

Usage

<MenuItem class="ui-active:bg-violet-5 ui-active:text-white ui-not-active:text-gray-900">
  Options
</MenuItem>

<MenuItem>
</MenuItem>

<!-- using presetAttributify -->
<MenuItem
  ui-active="bg-violet-5 text-white"
  ui-not-active="text-gray-900"
  >
  Options
</MenuItem>

headlessui

// headless-ui
import { presetHeadlessUi } from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno(),
    // default options {prefix: 'ui'}
    presetHeadlessUi(/* options */),
  ],
})

radix-ui

// radix-ui
import { presetRadixUi } from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno(),
    // default options {prefix: 'ui'}
    presetRadixUi(/* options */),
  ],
})

kobalte

// kobalte
import { presetKobalte } from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno(),
    // default options {prefix: 'ui'}
    presetKobalte(/* options */),
  ],
})

custom

// custom
import presetPrimitives from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'

Unocss({
  presets: [
    presetUno(),
    presetPrimitives( {
      prefix: 'ui',
      variants: 'enable|disable',
      selector: 'data-bar-state'
      isAttrBoolean = false,
    }),
  ],
})

List of variants

Variant	Inverse variant
ui-open	ui-not-open
ui-checked	ui-not-checked
ui-selected	ui-not-selected
ui-active	ui-not-active
ui-disabled	ui-not-disabled
...	...