unocss-preset-primitives

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

``bash
npm i -D unocss-preset-primitives
`


Demo

You can find the code inside the playground folder.

Usage

` vue

Options






ui-active="bg-violet-5 text-white"
ui-not-active="text-gray-900"
>
Options

`


headlessui


`typescript
// 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


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

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

kobalte


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

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


custom


`typescript
// 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 |
| ... | ...` |