Utilities and variants for styling headlessui radix-ui kobalte state or custom one
npm i -D unocss-preset-primitivesYou can find the code inside the playground folder.
<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>// 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
import { presetRadixUi } from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'
Unocss({
presets: [
presetUno(),
// default options {prefix: 'ui'}
presetRadixUi(/* options */),
],
})// kobalte
import { presetKobalte } from 'unocss-preset-primitives'
import presetUno from '@unocss/preset-uno'
Unocss({
presets: [
presetUno(),
// default options {prefix: 'ui'}
presetKobalte(/* options */),
],
})// 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,
}),
],
})| 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 |
... |
... |