Installation

How to install dependencies and structure your application with Una UI.

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 only supports Nuxt.js for now. However, you can create your own components using the Presets Mode installation.

Nuxt.js

You can install @una-ui/nuxt if you want to use the Una UI built-in components with Nuxt (@una-ui/preset is included in this package).

Install `@una-ui/nuxt` module:

npm

yarn

bun

pnpm

npm install @una-ui/nuxt

Alternatively, you can clone or download the template from the Una UI Starter Template.

Install Dependencies

npm

pnpm

bun

yarn

npm install

Development Server

npm

pnpm

bun

yarn

npm run dev -- -o

Well done! A browser window should automatically open for http://localhost:3000.

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

Read more in API > Configuration > una.config

Example Usage

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

Preview

Code

Presets Mode

You can install @una-ui/preset if you want to use the Una UI configured styles and utilities to build your own components.

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

yarn

bun

pnpm

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 extratorUna from '@una-ui/extractor-vue-script'

import presetUna from '@una-ui/preset'
import prefixes from '@una-ui/preset/prefixes'
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

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.

Preview

Html

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

What is Una UI?

Una UI is an atomic UI Framework powered by the UNOCSS engine. It provides components and presets for creating stunning user interfaces with ease.

Una Config

Customizing Una UI with `uno.config.ts`.

On This Page

Star on GitHub Create Issues Release Notes Become a Sponsor Edit this page on GitHub