awesome-unocss

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 66 Open GitHub ↗

⚡️ A curated list of awesome things related to UnoCSS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2 align='center'>Awesome UnoCSS</h2>

A curated list of awesome things related to <a href='https://github.com/unocss/unocss'>UnoCSS</a> ![GitHub Repo stars](https://img.shields.io/github/stars/unocss/unocss)

<a href="https://unocss.dev/">📚 Documentation</a> |
<a href="https://unocss.dev/interactive/">🧑‍💻 Interactive Docs</a> |
<a href="https://unocss.dev/play/">🤹‍♂️ Playground</a> |
<a href="https://tutorial.unocss.dev/">🎓 Tutorial</a>

# Resources

## Official Packages

### Presets

| Package | Description | Remarks |
| ------- | ----------- | ------- |
| <del> [@unocss/preset-uno](/presets/uno) </del> | 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 | |
| <del> [@unocss/preset-wind](/presets/wind) </del> | Tailwind CSS / Windi CSS compact preset | Deprecated: Use `presetWind3` from `@unocss/preset-wind3` instead in @66.0.0 |
| [@unocss/preset-wind3](/presets/wind3) | Tailwind CSS / Windi CSS compact preset | |
| [@unocss/preset-wind4](/presets/wind4) | Tailwind4 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) ![GitHub Repo stars](https://img.shields.io/github/stars/macheteHot/unocss-preset-scalpel) - Scalpel Preset by [@macheteHot](https://github.com/macheteHot).
- [unocss-preset-chroma](https://github.com/chu121su12/unocss-preset-chroma) ![GitHub Repo stars](https://img.shields.io/github/stars/chu121su12/unocss-preset-chroma) - Gradient Preset by [@chu121su12](https://github.com/chu121su12).
- [unocss-preset-scrollbar](https://github.com/action-hong/unocss-preset-scrollbar) ![GitHub Repo stars](https://img.shields.io/github/stars/action-hong/unocss-preset-scrollbar) - Scrollbar Preset by [@action-hong](https://github.com/action-hong).
- [unocss-applet](https://github.com/unocss-applet/unocss-applet) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/kidonng/unocss-preset-daisy) - daisyUI Preset by [@kidonng](https://github.com/kidonng).
- [unocss-preset-primitives](https://github.com/zirbest/unocss-preset-primitives) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/kirklin/unocss-preset-chinese) - Preset for Chinese fonts by [@kirklin](https://github.com/kirklin).
- [unocss-preset-autoprefixer](https://github.com/zouhangwithsweet/unocss-preset-autoprefixer) ![GitHub Repo stars](https://img.shields.io/github/stars/zouhangwithsweet/unocss-preset-autoprefixer) - Autoprefixer Preset by [@zouhang](https://github.com/zouhangwithsweet).
- [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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/) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/hyoban/unocss-preset-shadcn) - 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) ![GitHub Repo stars](https://img.shields.io/github/stars/YeungKC/unocss-preset-safe-area) - Use safe area with Unocss by YeungKC.
- [@unifydev/unify-preset](https://github.com/unify-ui-dev/unify-preset/blob/main/README.md) ![GitHub Repo stars](https://img.shields.io/github/stars/unify-ui-dev/unify-preset) - 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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/ZaneL1u/unocss-preset-better-breakpoints) - Better breakpoints presets for UnoCSS. By [@ZaneL1u](https://github.com/ZaneL1u).
- [unocss-preset-nuxt-ui](https://github.com/lehuuphuc/unocss-preset-nuxt-ui) ![GitHub Repo stars](https://img.shields.io/github/stars/lehuuphuc/unocss-preset-nuxt-ui) - The preset that makes using UnoCSS with Nuxt UI effortless. By [@lehuuphuc](https://github.com/lehuuphuc).
- [unocss-preset-utopia-core](https://github.com/azbestoid/unocss-preset-utopia-core) ![GitHub Repo stars](https://img.shields.io/github/stars/azbestoid/unocss-preset-utopia-core) - Fluid typography and spacing using Utopia.fyi. By [@azbestoid](https://github.com/azbestoid).
- [unocss-preset-fluentui](https://github.com/CollaStack/unocss-preset-fluentui) ![GitHub Repo stars](https://img.shields.io/github/stars/CollaStack/unocss-preset-fluentui) - Fluent UI design tokens as utility classes for UnoCSS. By [@link-duan](https://github.com/link-duan).
- [unocss-preset-magicolor](https://github.com/nixwai/unocss-preset-magicolor) ![GitHub Repo stars](https://img.shields.io/github/stars/nixwai/unocss-preset-magicolor) - Extend UnoCSS colors with arbitrary depths and theme configuration. By [@nixwai](https://github.com/nixwai).

### Frameworks

- [Anu](https://github.com/jd-solanki/anu) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/onu-ui/onu-ui) - Opinionated and lightweight UnoCSS ui library by [@zyyv](https://github.com/zyyv) and [@yzh990918](https://github.com/yzh990918).
- [AtoUI](https://github.com/bennymi/ato-ui) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/zyyv/unocss-transformer-alias) - Transform alias for UnoCSS shortcuts by [@zyyv](https://github.com/zyyv).
- [CSS to UnoCss](https://github.com/Simon-He95/transformToUnoCSS) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/unpreset/unocss-transformer-hash) - Hash UnoCSS utilities by [@zyyv](https://github.com/zyyv).

### Tools

- [Unot](https://github.com/Simon-He95/unot) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/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) ![GitHub Repo stars](https://img.shields.io/github/stars/imba97/hexo-unocss) - Support using UnoCSS when writing articles by [@imba97](https://github.com/imba97).
- [uno-colors](https://github.com/imba97/uno-colors) ![GitHub Repo stars](https://img.shields.io/github/stars/imba97/uno-colors) - Generate UnoCSS color gradation by [@imba97](https://github.com/imba97).

awesome-unocss

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README