# UnoCSS

A powerful and customizable engine that allows developers to build designs rapidly without the usual constraints of traditional CSS frameworks.

[Website](https://unocss.dev) [GitHub](https://github.com/unocss/unocss) [npm](https://npmjs.com/package/unocss)

UnoCSS is an innovative Atomic CSS engine designed to provide an instant, on-demand experience for styling web applications. Its core principle is to offer fully customizable styling solutions without the limitations imposed by core utility classes.

Users can create styles dynamically and customize their design system through a range of presets.

One of the standout features of UnoCSS is its speed. Unlike traditional CSS frameworks that require significant parsing time, UnoCSS operates instantly, boasting a performance that is remarkably faster than similar libraries, estimated to be five times quicker than Windi CSS or Tailwind JIT. This efficiency is paired with a lightweight footprint, with the entire library being approximately 6kb when minified and compressed, ensuring that it remains browser-friendly with zero dependencies.

The framework offers a variety of features aimed at improving developer experience, including shortcuts for grouping utilities, an attributify mode that allows for utility grouping in attributes, pure CSS icons that can be easily implemented as single classes, and advanced CSS directives that allow the reuse of utility classes with ease. Additionally, the inspector tool provides an interactive method for debugging styles in real time.

UnoCSS also excels in integration capabilities, supporting major build tools and workflows such as Vite, Nuxt, Astro, Webpack, and more. This wide-ranging support allows developers to effortlessly implement UnoCSS in their existing projects.

The community-driven nature of UnoCSS is further strengthened by the availability of extensive documentation and tutorials, ensuring that developers can effectively utilize its powerful features in their projects with minimal friction.

## Features

- Fully customizable without core utilities
- Instant operation with no parsing or scanning
- Lightweight at ~6kb min+brotli
- Dynamic aliasing of utilities
- Attributify mode for utility grouping
- Usage of pure CSS icons as single classes
- Support for variant groups
- CSS directives for reusing utilities with @apply
- Compilation mode for synthesizing classes at build time
- Interactive inspector for debugging
- Seamless integration with various development tools

## Details

**GitHub Stars**

16.8K

**NPM Downloads**

191.7K/week

**Latest Version**

0.65.1

**Created at**

Sep 30, 2021

**Updated at**

Dec 6, 2024

**License**

MIT License

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20KickstartUI)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=kickstartui)

## Related Items

### [emotion](https://kickstartui.com/details/emotion/)

Experience a new way to write styles in JavaScript that emphasizes creativity and efficiency.

### [Master CSS](https://kickstartui.com/details/master-css/)

This innovative product revolutionizes the way CSS is written and applied, merging simplicity with performance for effective web design and development.

**GitHub Stars**

1.8K

**Updated at**

Dec 5, 2024

**License**

MIT License

### [StyleX](https://kickstartui.com/details/stylex/)

This library offers a streamlined approach to styling web applications, using atomic styles to ensure both efficiency and maintainability.

**GitHub Stars**

8.4K

**Updated at**

Dec 6, 2024

**License**

MIT License

### [Tailwind CSS](https://kickstartui.com/details/tailwindcss/)

A utility-first CSS framework packed with classes to build any design in your markup, rapidly constructing modern websites while keeping HTML neat and maintainable.

**GitHub Stars**

83.7K

**Updated at**

Dec 6, 2024

**License**

MIT License

### [Skeleton](https://kickstartui.com/details/skeleton/)

An adaptive and accessible toolkit that enhances the development of modern web applications.

**GitHub Stars**

228

**Updated at**

Dec 26, 2023

**License**

MIT License

### [styled-components](https://kickstartui.com/details/styled-components/)

A powerful library that enables you to utilize CSS in JavaScript for styling your components seamlessly.

**GitHub Stars**

40.6K

**Updated at**

Dec 6, 2024

**License**

MIT License

### [ChakraUI](https://kickstartui.com/details/chakra-ui/)

Create accessible web applications quickly and efficiently with a robust set of essential components that are easy to use and highly customizable.

**GitHub Stars**

38.1K

**Updated at**

Dec 6, 2024

**License**

MIT License

### [Tamagui](https://kickstartui.com/details/tamagui/)

This library is a powerful solution for building UIs in React and React Native, combining efficiency with flexibility.

**GitHub Stars**

11.7K

**Updated at**

Dec 6, 2024

**License**

MIT License