Getting Start

Installation for UnoCSS

pnpm

pnpm i -D unocss @onu-ui/preset

yarn

yarn add -D unocss @onu-ui/preset

npm

npm i -D unocss @onu-ui/preset

The Onu UI presets are framework-agnostic, allowing you to use them in any project that supports UnoCSS.

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetOnu } from '@onu-ui/preset'

export default defineConfig({
  presets: [
    presetOnu({
      /* options */
    })
  ]
})

Theme colors are Random by default. You can pass your theme color in the color option. The Onu UI presets use Magicolor underneath to generate a complete set of theme styles based on color. You can preview and debug in the Magicolor Playground.

Options

export interface PrsetOnuOptions {
  /**
   * Theme primary color.
   *
   * @default 'auto' (random color)
   */
  color?: string

  /**
   * Enable preflights styles. (Reset styles)
   *
   * @default true
   */
  preflights?: boolean

  /**
   * Onu default font loaded by google fonts.
   *
   * @default ['DM Sans', 'DM Sans:400,700']
   * @example `font-onu`
   */
  fonts?: WebFontMeta | string | (WebFontMeta | string)[]

  /**
   * Icons options.
   */
  icons?: IconsOptions
}

Installation for Vue

pnpm

pnpm i onu-ui

yarn

yarn add onu-ui

npm

npm i onu-ui

onu-ui Package is a Vue 3 component library that uses the Onu UI presets by default.

// main.ts
import { createApp } from 'vue'
import OnuUI from 'onu-ui'
import App from './App.vue'
import 'onu-ui/dist/onu-ui.css'

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

TIP

To enhance the capabilities of Onu components, I strongly recommend that you install UnoCSS and @onu-ui/preset at the same time.

Details

pnpm i -D unocss @onu-ui/preset

Undering UnoCSS and @onu-ui/preset, you can easily customize the theme of the components.

// main.ts
import { createApp } from 'vue'
import OnuUI from 'onu-ui'
import App from './App.vue'
import 'onu-ui/dist/onu-ui.css'
import 'uno.css'

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

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetOnu } from '@onu-ui/preset'

export default defineConfig({
  presets: [
    // ...
    presetOnu({ 
      preflights: false, 
    }) 
  ]
})

// vite.config.ts
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    // ...
    UnoCSS() 
  ]
})

Then you can use the Onu UI components in your Vue project, such as:

<template>
  <OButton>Button</OButton>
</template>