Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zirbest/unocss-preset-primitives
Utilities and variants for styling headlessui, radix-ui, kobalte state or custom one ;)
https://github.com/zirbest/unocss-preset-primitives
ark ark-ui headlessui kobalte primitives radix-ui unocss unocss-preset zagjs
Last synced: 17 days ago
JSON representation
Utilities and variants for styling headlessui, radix-ui, kobalte state or custom one ;)
- Host: GitHub
- URL: https://github.com/zirbest/unocss-preset-primitives
- Owner: zirbest
- License: mit
- Created: 2022-10-13T13:40:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-04T11:27:00.000Z (4 months ago)
- Last Synced: 2024-09-15T01:56:35.540Z (about 2 months ago)
- Topics: ark, ark-ui, headlessui, kobalte, primitives, radix-ui, unocss, unocss-preset, zagjs
- Language: TypeScript
- Homepage:
- Size: 771 KB
- Stars: 56
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-unocss - unocss-preset-primitives - Like [headlessui-tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) , radix-ui , custom for UnoCSS. (Presets)
- awesome-unocss - unocss-preset-primitives - Like [headlessui-tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) , radix-ui , custom for UnoCSS. (Presets)
README
# unocss-preset-primitives
Utilities and variants for styling [headlessui](https://github.com/zirbest/unocss-preset-primitives#headlessui) [radix-ui](https://github.com/zirbest/unocss-preset-primitives#radix-ui) [kobalte](https://github.com/zirbest/unocss-preset-primitives#kobalte) state or [custom](https://github.com/zirbest/unocss-preset-primitives#custom) one
```bash
npm i -D unocss-preset-primitives
```
# Demo
You can find the code inside the [playground](https://github.com/zirbest/unocss-preset-primitives/tree/main/playground) folder.
# Usage
``` vue
Options
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` |
| `...` | `...` |