0.0.2-beta.0 • Published 5 months ago
unocss-preset-primitives v0.0.2-beta.0
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 |
... | ... |
0.0.2-beta.0
5 months ago
0.0.1-beta.12
7 months ago
0.0.1-beta.13
7 months ago
0.0.1-beta.10
10 months ago
0.0.1-beta.11
8 months ago
0.0.1-beta.7
11 months ago
0.0.1-beta.9
10 months ago
0.0.1-beta.8
11 months ago
0.0.1-beta.6
12 months ago
0.0.1-beta.5
1 year ago
0.0.1-beta.4
1 year ago
0.0.1-beta.3
2 years ago
0.0.1-beta.0
2 years ago