Skip to content

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:

html
<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!

Released under the MIT License.