awesome-unocss
awesome-unocss copied to clipboard
Awesome things related to UnoCSS
Awesome UnoCSS
Contents
- Useful Links
- IDE Extensions
- Presets
- Transformers
- Extractors
- UI Libraries, Components & Templates
- Starters & Themes
- Open-Source Projects
- Learning
Useful Links
Legend: π Official resource
- π Website - Official UnoCSS website.
- π Repository - Official UnoCSS repository.
- π Discussions - Official place to connect with other community members about UnoCSS.
- π Play - Online playground for UnoCSS.
IDE Extensions
Legend: π Official resource
- π IntelliSense for Code - IntelliSense extension for Visual Studio Code.
Presets
Legend: π Official Presets Β· π€ΉββοΈ Community Presets
- π @unocss/preset-uno - The default preset (right now it's equivalent to
@unocss/preset-wind
). - π @unocss/preset-mini - The minimal but essential rules and variants.
- π @unocss/preset-wind - Tailwind / Windi CSS compact preset.
- π @unocss/preset-attributify - Provides Attributify Mode to other presets and rules.
- π @unocss/preset-icons - Use any icon as a class utility.
- π @unocss/preset-web-fonts - Web fonts at ease.
- π @unocss/preset-typography - The typography preset.
- π @unocss/preset-tagify - Tagify Mode for UnoCSS.
- π @unocss/preset-rem-to-px - Converts rem to px for utils.
- π€ΉββοΈ unocss-preset-chinese - Preset for Chinese fonts.
- π€ΉββοΈ unocss-preset-ease - Easing Functions as Transitions.
- π€ΉββοΈ unocss-preset-scalpel - Scalpel Preset.
- π€ΉββοΈ unocss-preset-chroma - Gradient Preset.
- π€ΉββοΈ unocss-preset-scrollbar - Scrollbar Preset.
- π€ΉββοΈ unocss-applet - Using UnoCSS in applet (UniApp / Taro).
- π€ΉββοΈ unocss-preset-weapp - WeChat MiniProgram Preset for UniApp and Taro.
- π€ΉββοΈ unocss-preset-heropatterns - Preset that integrates Hero Patterns.
- π€ΉββοΈ unocss-preset-flowbite - Port of Flowbite Tailwind plugin for UnoCSS.
- π€ΉββοΈ unocss-preset-forms - Port of @tailwindcss/forms for UnoCSS.
- π€ΉββοΈ unocss-preset-extra - Animate.css Preset and some other rules.
- π€ΉββοΈ unocss-preset-daisy - daisyUI Preset.
- π€ΉββοΈ unocss-preset-primitives - Like headlessui-tailwindcss , radix-ui , custom for UnoCSS.
- π€ΉββοΈ unocss-preset-theme - Preset for automatic theme switching.
- π€ΉββοΈ unocss-preset-autoprefixer - Autoprefixer Preset.
- π€ΉββοΈ unocss-preset-scrollbar-hide - Hide scrollbars, although the element can still be scrolled.
- π€ΉββοΈ unocss-preset-radix - Use the Radix UI color palette with UnoCSS.
- π€ΉββοΈ unocss-preset-glyph - Embed subset of glyphs from fonts.
- π€ΉββοΈ unocss-preset-grid - Bootstrap 5 Like Grid Preset.
Transformers
Legend: π Official Presets Β· π€ΉββοΈ Community Presets
- π @unocss/transformer-variant-group - Transformer for Windi CSS's variant group feature.
- π @unocss/transformer-directives - Transformer for CSS directives like
@apply
. - π @unocss/transformer-compile-class - Compile group of classes into one class.
- π @unocss/transformer-attributify-jsx - Support valueless attributify in JSX/TSX.
- π€ΉββοΈ unocss-transformer-attribute-values-group - Attribute values group transformer for UnoCSS.
- π€ΉββοΈ unocss-transformer-alias - Transform alias for UnoCSS shortcuts.
Extractors
Legend: π Official Extractors Β· π€ΉββοΈ Community Extractors
- π @unocss/extractor-pug - Extractor for Pug.
- π @unocss/extractor-svelte - Extractor for Svelte.
- π @unocss/extractor-arbitrary-variants - Extractor to support arbitrary variants for utilities.
UI Libraries, Components & Templates
Legend: π Official resource Β· π Library Β· 𧩠Components Β· π Templates
- π Anu - DX focused utility based vue component library.
- π OnuUI - Popular, beautiful and fast UnoCSS component library.
- π AtoUI - Elemental UI library for Svelte offering an easily themeable design system.
Starters & Themes
Legend: πΌ Package Β· π Command line tool/generator Β· π Cloneable
- π vite-boot - Vite Boot is a lightning fast Vue 3 boilerplate with strongly typed TypeScript, UnoCSS, DaisyUI, Vue Router, Pinia, and Netlify support.
Open-Source Projects
- π celeris-web - Celeris Web is a highly performant and customizable front-end development template built with Vue 3, Vite, and TypeScript. It features the latest syntax, components and APIs auto importing, state management, Chinese font presets, internationalization, and integration with OpenAI's ChatGPT API.
Learning
Legend: π Official resource Β· π§ͺ Sample Β· π§ Setup Tutorial Β· π¬ Video Tutorial Β· π Component or Page Tutorial Β· π₯ Cast
Β·
Contributions welcome! Read the contribution guidelines first.