onu-ui

Onu-UI (WIP)

Onu-UI for web glassmorphism components generate by UnoCSS.

🧑‍💻 Document ^Beta | 🤹‍♂️ Preview

Features

• 🌈 Glass Components - All components follow the glassmorphism style.
• 🔥 Introduce on demand - Provide resolver to automatically import only used components.
• 🎉 Ts Supported - Support TypeScript & type checked & type inference.
• 💡 Cli Build - Easy to create repo with Onu Cli.
• 🍬 CSS Preset - Has UnoCSS preset package to use, rendered UI easily.
• ⚙️ Theme Config - Use attribute mode like unocss to desige. Support theme config to customize theme.

Usage

Full Import

npm i onu-ui
npm i unocss -D

Add onu-ui in your main entry file.

// main.ts
import OnuUI from 'onu-ui'
import 'uno.css'
import 'onu-ui/dist/style.css'

createApp(App).use(OnuUI).mount('#app')

Custom UnoCSS config

Custom your UnoCSS config:

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetOnu } from 'onu-ui'

export default defineConfig({
  presets: [
    // ...
    presetUno(),
    presetAttributify(),
    presetOnu(),
  ],
})

On-demand Import:

You need to use an additional plugin to import components you used. First you need to install unplugin-vue-components and unplugin-auto-import.

npm install -D unplugin-vue-components unplugin-auto-import

Then add the code below into your Vite config file.

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { OnuResolver } from 'onu-ui'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [OnuResolver()],
    }),
    Components({
      resolvers: [OnuResolver()],
    }),
  ],
})

Playground

You can try OnuUI out with the components built-in playground.

Try it with our built-in playground(WIP)

Try it with stackblitz

Contributing

Developers interested in contributing should read the Code of Conduct and the Contributing Guide.

Thank you to all the people who already contributed to OnuUI!

Credits

UnoCSS

@nuxt/ui

License

MIT License © 2022 chris-zhu