What is Onu UI?

Onu UI is an atomic UI library based on UnoCSS and it is framework-independent.

The core is opinionated and all components are generated by pure atomicity css, which is fast, flexible, and highly free to mix and match.

Features

• Pure atomic css
  No need to introduce additional css files
• Simple and efficient
  Render UI with the least amount of code
• Expand Easily
  Atomic css allows you to freely combine the styles you want
• Dynamic theme
  Generated with Magicolor that conform to human visual perception
• Toggle theme
  Automatically adapts to dark / light mode
• UI Design
  Neat & beautiful crafted UI components
• On demand
  Provide resolver to automatically import only used components
• Typescript Support
  Support TypeScript & type checked & type inference

Intro

Onu UI provides a large number of atomic components, you can use Onu UI in any framework supported by UnoCSS, such as Vue, React, Svelte, etc.

Onu UI also lightweight, it only exists in your development dependencies and will not increase your production package size. It includes a comprehensive and beautifully prebuilt component suite to help you quickly build web applications.

It is beautifully designed, provides theme variants and rules for easy style overrides, and supports dynamic theme color generation, generating a color system that conforms to human visual perception by Magicolor and all theme key colors come from it. All-in-One theme configuration makes your theme configuration simpler.

About the Vue components library was written with the latest Vue3 setup script, full of Typescript, and uses Vite and Tsup to package and build the component library. In addition, we also embrace the latest front-end ecological cutting-edge technology, thanks to VueUse, and the huge Vite plugin ecosystem.

For example:

unocss

<button btn>Button</button>
<button btn="~ sm">Button</button>

vue

import { Button } from 'onu-ui'

<Button>Button</Button>
<Button size='sm'>Button</Button>

🌟🌟🌟

All components of Onu UI are implemented by UnoCSS shortcuts, which is a pure atomic UI library, and UnoCSS will cache and minimize compression during the matching process, and its performance is extremely high.

Playground

Contributing

Developers interested in contributing should read the Contributing Guide.

Thank you to all the people who already contributed to Onu UI!