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

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

Awesome things related to UnoCSS
https://github.com/kirklin/awesome-unocss

List: awesome-unocss

awesome awesome-list awesome-lists resources unocss

Last synced: 3 months ago
JSON representation

Awesome things related to UnoCSS

Awesome Lists containing this project

README

        

# Awesome UnoCSS [![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re)







Awesome UnoCSS






UnoCSS is an instant on-demand Atomic CSS engine.



NPM version:NPM version






## Contents

- [Useful Links](#useful-links)
- [IDE Extensions](#ide-extensions)
- [Presets](#presets)
- [Transformers](#transformers)
- [Extractors](#extractors)
- [UI Libraries, Components & Templates](#ui-libraries-components--templates)
- [Starters & Themes](#starters--themes)
- [Open-Source Projects](#open-source-projects)
- [Learning](#learning)

## Useful Links

**Legend**: πŸ’™ Official resource

- πŸ’™ [Website](https://unocss.dev/) - Official UnoCSS website.
- πŸ’™ [Repository](https://github.com/unocss/unocss) - Official UnoCSS repository.
- πŸ’™ [Discussions](https://github.com/unocss/unocss/discussions) - Official place to connect with other community members about UnoCSS.
- πŸ’™ [Play](https://unocss.dev/play/) - Online playground for UnoCSS.

## IDE Extensions

**Legend**: πŸ’™ Official resource

- πŸ’™ [IntelliSense for Code](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - IntelliSense extension for Visual Studio Code.

## Presets

**Legend**: πŸ’™ Official Presets Β· πŸ€Ήβ€β™‚οΈ Community Presets

- πŸ’™ [@unocss/preset-uno](https://github.com/unocss/unocss/tree/main/packages/preset-uno) - The default preset (right now it's equivalent to `@unocss/preset-wind`).
- πŸ’™ [@unocss/preset-mini](https://github.com/unocss/unocss/tree/main/packages/preset-mini) - The minimal but essential rules and variants.
- πŸ’™ [@unocss/preset-wind](https://github.com/unocss/unocss/tree/main/packages/preset-wind) - Tailwind / Windi CSS compact preset.
- πŸ’™ [@unocss/preset-attributify](https://github.com/unocss/unocss/tree/main/packages/preset-attributify) - Provides Attributify Mode to other presets and rules.
- πŸ’™ [@unocss/preset-icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons) - Use any icon as a class utility.
- πŸ’™ [@unocss/preset-web-fonts](https://github.com/unocss/unocss/tree/main/packages/preset-web-fonts) - Web fonts at ease.
- πŸ’™ [@unocss/preset-typography](https://github.com/unocss/unocss/tree/main/packages/preset-typography) - The typography preset.
- πŸ’™ [@unocss/preset-tagify](https://github.com/unocss/unocss/tree/main/packages/preset-tagify) - Tagify Mode for UnoCSS.
- πŸ’™ [@unocss/preset-rem-to-px](https://github.com/unocss/unocss/tree/main/packages/preset-rem-to-px) - Converts rem to px for utils.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-chinese](https://github.com/kirklin/unocss-preset-chinese) - Preset for Chinese fonts.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-ease](https://github.com/kirklin/unocss-preset-ease) - Easing Functions as Transitions.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-scalpel](https://github.com/macheteHot/unocss-preset-scalpel) - Scalpel Preset.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-chroma](https://github.com/chu121su12/unocss-preset-chroma) - Gradient Preset.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-scrollbar](https://github.com/action-hong/unocss-preset-scrollbar) - Scrollbar Preset.
- πŸ€Ήβ€β™‚οΈ [unocss-applet](https://github.com/unocss-applet/unocss-applet) - Using UnoCSS in applet (UniApp / Taro).
- πŸ€Ήβ€β™‚οΈ [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).
- πŸ€Ήβ€β™‚οΈ [unocss-preset-heropatterns](https://github.com/Julien-R44/unocss-preset-heropatterns) - Preset that integrates [Hero Patterns](https://heropatterns.com/).
- πŸ€Ήβ€β™‚οΈ [unocss-preset-flowbite](https://github.com/Julien-R44/unocss-preset-flowbite) - Port of [Flowbite Tailwind plugin](https://github.com/themesberg/flowbite) for UnoCSS.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-forms](https://github.com/Julien-R44/unocss-preset-forms) - Port of [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) for UnoCSS.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-extra](https://github.com/MoomFE/unocss-preset-extra) - [Animate.css](https://animate.style) Preset and some other rules.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-daisy](https://github.com/kidonng/unocss-preset-daisy) - daisyUI Preset.
- πŸ€Ήβ€β™‚οΈ [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.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-theme](https://github.com/Dunqing/unocss-preset-theme) - Preset for automatic theme switching.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-autoprefixer](https://github.com/zouhangwithsweet/unocss-preset-autoprefixer) - Autoprefixer Preset.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide) - Hide scrollbars, although the element can still be scrolled.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-radix](https://github.com/endigma/unocss-preset-radix) - Use the Radix UI color palette with UnoCSS.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-glyph](https://github.com/chu121su12/unocss-preset-glyph) - Embed subset of glyphs from fonts.
- πŸ€Ήβ€β™‚οΈ [unocss-preset-grid](https://github.com/StatuAgency/unocss-preset-grid) - Bootstrap 5 Like Grid Preset.

## Transformers

**Legend**: πŸ’™ Official Presets Β· πŸ€Ήβ€β™‚οΈ Community Presets
- πŸ’™ [@unocss/transformer-variant-group](https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group) - Transformer for Windi CSS's variant group feature.
- πŸ’™ [@unocss/transformer-directives](https://github.com/unocss/unocss/tree/main/packages/transformer-directives) - Transformer for CSS directives like `@apply`.
- πŸ’™ [@unocss/transformer-compile-class](https://github.com/unocss/unocss/tree/main/packages/transformer-compile-class) - Compile group of classes into one class.
- πŸ’™ [@unocss/transformer-attributify-jsx](https://github.com/unocss/unocss/tree/main/packages/transformer-attributify-jsx) - Support valueless attributify in JSX/TSX.
- πŸ€Ήβ€β™‚οΈ [unocss-transformer-attribute-values-group](https://github.com/lvjiaxuan/unocss-transformer-attribute-values-group) - Attribute values group transformer for UnoCSS.
- πŸ€Ήβ€β™‚οΈ [unocss-transformer-alias](https://github.com/zyyv/unocss-transformer-alias) - Transform alias for UnoCSS shortcuts.

## Extractors

**Legend**: πŸ’™ Official Extractors Β· πŸ€Ήβ€β™‚οΈ Community Extractors
- πŸ’™ [@unocss/extractor-pug](https://github.com/unocss/unocss/tree/main/packages/extractor-pug) - Extractor for Pug.
- πŸ’™ [@unocss/extractor-svelte](https://github.com/unocss/unocss/tree/main/packages/extractor-svelte) - Extractor for Svelte.
- πŸ’™ [@unocss/extractor-arbitrary-variants](https://github.com/unocss/unocss/tree/main/packages/extractor-arbitrary-variants) - Extractor to support arbitrary variants for utilities.

## UI Libraries, Components & Templates

**Legend**: πŸ’™ Official resource Β· πŸ“š Library Β· 🧩 Components Β· πŸ“ Templates

- πŸ“š [Anu](https://github.com/jd-solanki/anu) - DX focused utility based vue component library.
- πŸ“š [OnuUI](https://github.com/onu-ui/onu-ui) - Popular, beautiful and fast UnoCSS component library.
- πŸ“š [AtoUI](https://github.com/bennymi/ato-ui) - Elemental UI library for Svelte offering an easily themeable design system.

## Starters & Themes

**Legend**: πŸ’Ό Package Β· πŸ“Ÿ Command line tool/generator Β· πŸš€ Cloneable

- πŸš€ [vite-boot](https://github.com/kirklin/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](https://github.com/kirklin/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.