sondh0127 / onu-ui

Onu-UI for web glassmorphism components generate by UnoCSS

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

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 your UnoCSS config:

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

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

Preveiew

You can see the preview of the following commands:

npm run build

Then you can run playground to see the result.

npm run play

If you want start the dev server, you can run:

npm run dev

Credits

UnoCSS

@nuxt/ui

License

MIT License © 2022 chris-zhu