Installation

Una UI is still in its early stages of development. Please expect breaking changes as we go along. We recommend to install it in your project using the edge channel to get the latest updates.

Una UI offers 2 forms of installation for the moment:

You can install @una-ui/preset if you want to use the Una UI configured styles and utilities to build your own components.
You can install @una-ui/nuxt if you want to use the Una UI built-in components with Nuxt 3 (@una-ui/preset is included in this package).

Framework

For now, Una UI only supports Nuxt.js. However, you can create your own components using the Presets Mode installation.

Nuxt.js

You can also use the Una UI Starter Template to get started with your project.

Install @una-ui/nuxt module:

npm

npm install @una-ui/nuxt

Add @una-ui/nuxt to the modules section of nuxt.config.js:

export default {
  modules: [
    '@una-ui/nuxt',
  ],

  una: {
    prefix: 'U', // UBtn, UInput, UFormGroup, etc.
    // please refer to the configuration for more options
  },
}

Below is the recommended configuration to have a better IDE experience

If you don't have unocss.config.ts file, you can create it in the root directory of your project.

import { defineConfig } from 'unocss'

import config from '@una-ui/nuxt/una.config'

export default defineConfig({
  ...config,

  // unocss config here
})

That's it! You're ready to go! 🚀

Example Usage

Here is an example of the NFormGroup, NInput, and NButton components.

Presets Mode

Full documentation for the Presets is not yet available, but you can check the available presets here for the meantime.

This is applicable to all UI library/frameworks that are supported by Unocss. Please refer to Unocss documentation for more information.

Install @una-ui/preset module:

npm

npm install unocss @una-ui/preset @una-ui/extractor-vue-script

Add @una-ui/preset to the presets section of unocss.config.ts:

If you don't have unocss.config.ts file, you can create it in the root directory of your project. Below is the minimum configuration needed to get started. You can add more options as you go along.

import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import presetUna from '@una-ui/preset'
import prefixes from '@una-ui/preset/prefixes'
import extratorUna from '@una-ui/extractor-vue-script'

export default {
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetUna(),
  ],
  extractors: [
    extratorUna({
      prefixes,
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
}

Import styles in your main.ts or any other entry point of your application:

import 'unocss'
import '@una-ui/preset/una.css'

That's it! You're ready to go! 🚀

Example Usage

Here's an example of input, button, and form-group presets in plain HTML. You can apply the same approach to other UI libraries/frameworks.

Edge Channel

The Edge Channel provides updates for the latest package versions whenever there is a commit to the main branch.

You can install the Edge Channel by running the following command:

Add @una-ui/nuxt to the devDependencies section of package.json:

{
  "devDependencies": {
    "@una-ui/nuxt": "npm:@una-ui/nuxt-edge@latest"
  }
}

Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

The same steps apply to @una-ui/preset package if you want to use the Presets Mode

Starter Template

We recommend to use the Edge Channel installation to get the latest updates.

Github repo: https://github.com/una-ui/starter
Repo demo: https://starter.una.ui
Stackblitz playground: https://stackblitz.com/github/una-ui/starter

Edit this page on GitHub

Introduction

Getting StartedConfiguration