Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/unocss-community/awesome-unocss

⚡️ A curated list of awesome things related to UnoCSS
https://github.com/unocss-community/awesome-unocss

List: awesome-unocss

Last synced: 2 months ago
JSON representation

⚡️ A curated list of awesome things related to UnoCSS

Awesome Lists containing this project

README 

        


  


  logo of awesome-unocss repository

  


  





Awesome UnoCSS





A curated list of awesome things related to UnoCSS







📚 Documentation |

🧑‍💻 Interactive Docs |

🤹‍♂️ Playground |

🎓 Tutorial







# Resources



## Official Packages



### Presets



| Package | Description | Remarks |

| ------- | ----------- | ------- |

|  [@unocss/preset-uno](/presets/uno)  | The default preset | Deprecated: Use `presetWind3` from `@unocss/preset-wind3` instead in @66.0.0 |

| [@unocss/preset-mini](/presets/mini) | The minimal but essential rules and variants | |

|  [@unocss/preset-wind](/presets/wind)  | Tailwind CSS / Windi CSS compact preset | Deprecated: Use `presetWind3` from `@unocss/preset-wind3` instead in @66.0.0 |

| [@unocss/preset-wind3](/presets/wind) | Tailwind CSS3 / Windi CSS compact preset | |

| [@unocss/preset-attributify](/presets/attributify) | Enables Attributify Mode for other rules | |

| [@unocss/preset-tagify](/presets/tagify) | Enables Tagify Mode for other rules | |

| [@unocss/preset-icons](/presets/icons) | Pure CSS Icons solution powered by Iconify | |

| [@unocss/preset-web-fonts](/presets/web-fonts) | Web fonts (Google Fonts, etc.) support | |

| [@unocss/preset-typography](/presets/typography) | The typography preset | |

| [@unocss/preset-rem-to-px](/presets/rem-to-px) | Converts rem to px for utils | |



### Transformers



| Package | Description |

| ------- | ----------- |

| [@unocss/transformer-variant-group](/transformers/variant-group) | Transformer for Windi CSS's variant group feature |

| [@unocss/transformer-directives](/transformers/directives) | Transformer for CSS directives like `@apply` |

| [@unocss/transformer-compile-class](/transformers/compile-class) | Compile group of classes into one class |

| [@unocss/transformer-attributify-jsx](/transformers/attributify-jsx) | Support valueless attributify in JSX/TSX |



### Extractors



| Package | Description |

| ------- | ----------- |

| [@unocss/extractor-pug](/extractors/pug) | Extractor for Pug |

| [@unocss/extractor-svelte](/extractors/svelte) | Extractor for Svelte |

| [@unocss/extractor-arbitrary-variants](/extractors/arbitrary-variants) | Extractor to support arbitrary variants for utilities |



## Community



### Presets



- [unocss-preset-scalpel](https://github.com/macheteHot/unocss-preset-scalpel) - Scalpel Preset by [@macheteHot](https://github.com/macheteHot).

- [unocss-preset-chroma](https://github.com/chu121su12/unocss-preset-chroma) - Gradient Preset by [@chu121su12](https://github.com/chu121su12).

- [unocss-preset-scrollbar](https://github.com/action-hong/unocss-preset-scrollbar) - Scrollbar Preset by [@action-hong](https://github.com/action-hong).

- [unocss-applet](https://github.com/unocss-applet/unocss-applet) - Using UnoCSS in applet (UniApp / Taro) by [@zguolee](https://github.com/zguolee).

- [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - WeChat MiniProgram Preset for [UniApp](https://uniapp.dcloud.io) and [Taro](https://taro-docs.jd.com/taro/docs) by [@MellowCo](https://github.com/MellowCo).

- [unocss-preset-heropatterns](https://github.com/Julien-R44/unocss-preset-heropatterns) - Preset that integrates [Hero Patterns](https://heropatterns.com/) by [@Julien-R44](https://github.com/Julien-R44).

- [unocss-preset-flowbite](https://github.com/Julien-R44/unocss-preset-flowbite) - Port of [Flowbite Tailwind plugin](https://github.com/themesberg/flowbite) for UnoCSS by [@Julien-R44](https://github.com/Julien-R44).

- [unocss-preset-forms](https://github.com/Julien-R44/unocss-preset-forms) - Port of [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) for UnoCSS by [@Julien-R44](https://github.com/Julien-R44).

- [unocss-preset-extra](https://github.com/MoomFE/unocss-preset-extra) - [Animate.css](https://animate.style) Preset and some other rules by [@Zhang-Wei-666](https://github.com/Zhang-Wei-666).

- [unocss-preset-daisy](https://github.com/kidonng/unocss-preset-daisy) - daisyUI Preset by [@kidonng](https://github.com/kidonng).

- [unocss-preset-primitives](https://github.com/zirbest/unocss-preset-primitives) - Like [headlessui-tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss), radix-ui, custom for UnoCSS by [@zirbest](https://github.com/zirbest).

- [unocss-preset-theme](https://github.com/Dunqing/unocss-preset-theme) - Preset for automatic theme switching by [@Dunqing](https://github.com/Dunqing).

- [unocss-preset-chinese](https://github.com/kirklin/unocss-preset-chinese) - Preset for Chinese fonts by [@kirklin](https://github.com/kirklin).

- [unocss-preset-autoprefixer](https://github.com/zouhangwithsweet/unocss-preset-autoprefixer) - Autoprefixer Preset by [@zouhang](https://github.com/zouhangwithsweet).

- [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide) - Hide scrollbars, although the element can still be scrolled by [@reslear](https://github.com/reslear).

- [unocss-preset-radix](https://github.com/endigma/unocss-preset-radix) - Use the Radix UI color palette with UnoCSS by [@endigma](https://github.com/endigma).

- [unocss-preset-glyph](https://github.com/chu121su12/unocss-preset-glyph) - Embed subset of glyphs from fonts by [@chu121su12](https://github.com/chu121su12).

- [unocss-preset-grid](https://github.com/StatuAgency/unocss-preset-grid) - Bootstrap 5 Like Grid Preset by [@StatuAgency](https://github.com/StatuAgency).

- [unocss-preset-grid-areas](https://github.com/chz/unocss-preset-grid-areas) - Grid Areas Preset for UnoCSS by [@chz](https://github.com/chz).

- [unocss-preset-ease](https://github.com/kirklin/unocss-preset-ease) - Easing Functions as Transitions for UnoCSS by [@kirklin](https://github.com/kirklin).

- [unocss-preset-useful](https://github.com/unpreset/unocss-preset-useful) - Integrate and Useful Preset by [@zyyv](https://github.com/zyyv).

- [una-ui-preset](https://unaui.com/getting-started/installation#presets-mode) - Build your own components using [UnaUI](https://unaui.com/) preset by [@phojie](https://github.com/phojie).

- [unocss-preset-fluid](https://renatomoor.github.io/unocss-preset-fluid/) - Elegantly scale type and space without breakpoints by [@renatomoor](https://github.com/renatomoor).

- [unocss-preset-fluid-sizing](https://github.com/onmax/unocss-preset-fluid-sizing/) - Fluid typography and spacing highly configurable with UnoCSS philosophy in mind by [@onmax](https://github.com/onmax).

- [unocss-preset-block](https://github.com/unpreset/unocss-preset-block) - Block some non-standard classnames by [@chizuki](https://github.com/chizukicn).

- [unocss-preset-animations](https://unocss-preset-animations.aelita.me/) - Preset for flexible and composable animations by [@Aelita](https://github.com/xsjcTony).

- [unocss-preset-shadcn](https://github.com/hyoban/unocss-preset-shadcn#readme) - Use [shadcn/ui](https://ui.shadcn.com) with UnoCSS by [@zouhang](https://github.com/zouhangwithsweet) and [@hyoban](https://github.com/hyoban).

- [@yeungkc/unocss-preset-safe-area](https://github.com/YeungKC/unocss-preset-safe-area) - Use safe area with Unocss by [YeungKC](https://github.com/YeungKC).

- [@unifydev/unify-preset](https://github.com/unify-ui-dev/unify-preset/blob/main/README.md) - Atomic Theming UI Library Powered By UnoCSS, like DaisyUI but customizable. By [@johnkat-mj](https://github.com/Johnkat-Mj).

- [unocss-preset-tailwindcss-motion](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion) - Ridiculously awesome animations via unofficial [Tailwind Motion](https://rombo.co/tailwind) port, by [@whatnicktweets](https://x.com/whatnicktweets).

- [unocss-preset-magicss](https://github.com/unpreset/unocss-preset-magicss) - Integrate magic css animation preset by [@zyyv](https://github.com/zyyv).

- [css-fade](https://www.npmjs.com/package/css-fade) - Fade out one or multiple sides of html elements using CSS mask in UnoCSS by [@dan-smt](https://github.com/dan-smt).

- [unocss-preset-gradient-fn](https://github.com/onmax/unocss-preset-gradient-fn) - Support gradient transitions and gradient easing functions. Preset by [@onmax](https://github.com/onmax).

- [unocss-preset-scale-px](https://github.com/onmax/unocss-preset-scale-px) - Numeric values are the same as px by [@onmax](https://github.com/onmax).

- [unocss-preset-advance-gradients](https://github.com/itsmnthn/unocss-preset-advance-gradients) - Support rounded gradient borders, gradient text and pre-defined gradients. By [@itsmnthn](https://github.com/itsmnthn).

- [unocss-preset-better-breakpoints](https://github.com/ZaneL1u/unocss-preset-better-breakpoints) - Better breakpoints presets for UnoCSS. By [@ZaneL1u](https://github.com/ZaneL1u).



### Frameworks



- [Anu](https://github.com/jd-solanki/anu) - DX focused utility based vue component library by [@jd-solanki](https://github.com/jd-solanki).

- [Onu UI](https://github.com/onu-ui/onu-ui) - Opinionated and lightweight UnoCSS ui library by [@zyyv](https://github.com/zyyv), [@yzh990918](https://github.com/yzh990918).

- [AtoUI](https://github.com/bennymi/ato-ui) - Elemental UI library for Svelte offering an easily themeable design system by [@bennymi](https://github.com/bennymi).

- [Una UI](https://unaui.com/) - The atomic UI Framework for Nuxt 3, powered by UnoCSS engine by [@phojie](https://github.com/phojie).



### Transformers



- [unocss-transformer-attribute-values-group](https://github.com/lvjiaxuan/unocss-transformer-attribute-values-group) - Attribute values group transformer for UnoCSS by [@lvjiaxuan](https://github.com/lvjiaxuan).

- [unocss-transformer-alias](https://github.com/zyyv/unocss-transformer-alias) - Transform alias for UnoCSS shortcuts by [@zyyv](https://github.com/zyyv).

- [CSS to UnoCss](https://github.com/Simon-He95/transformToUnoCSS) - Transform CSS to Unocss by [@Simon-He95](https://github.com/Simon-He95).

- [unocss-transformer-classnames-minifier](https://github.com/alisobirjanov/unocss-transformer-classnames-minifier) - Transform UnoCSS classnames minifier by [@alisobirjanov](https://github.com/alisobirjanov).

- [unocss-transformer-hash](https://github.com/unpreset/unocss-transformer-hash) - Hash UnoCSS utilities by [@zyyv](https://github.com/zyyv).



### Tools



- [Unot](https://github.com/Simon-He95/unot) - VSCode extension that provides the ability to convert css to unocss and simplifies the writing of unocss by [@Simon-He95](https://github.com/Simon-He95).

- [figma-to-unocss](https://github.com/zouhangwithsweet/figma-to-unocss) - Figma plugin to transform design to unocss by [@zouhang](https://github.com/zouhangwithsweet).

- [hexo-unocss](https://github.com/imba97/hexo-unocss) - Support using UnoCSS when writing articles by [@imba97](https://github.com/imba97).

- [uno-colors](https://github.com/imba97/uno-colors) - Generate UnoCSS color gradation by [@imba97](https://github.com/imba97).