In this section, we will learn how to configure Una UI in your Nuxt project.

Note: This section is currently incomplete. Please revisit later for additional updates.


Una UI for Nuxt includes essential packages, you can also use them directly in your project without additional configuration.

UnocssInstant On-demand Atomic CSS Engine
Color ModeDark and Light mode with auto detection made easy with Nuxt
VueuseCollection of essential Vue Composition API utils
HeadlessUICompletely unstyled, fully accessible UI components for Vue


In your nuxt.config.js file, You can also add any configuration options to the una section.

prefixStringNUna UI component prefix
themeableBooleantrueEnable theming
globalBooleantrueRegister components globally

By default, Una UI will register all components globally. If you want to register components manually, set global to false. And you can do something like this import { NButton } from '@una-ui/nuxt' to import components.

export default {
  modules: [

  una: {
    prefix: 'N',
    themeable: true,
    global: true,

In your app.config.ts file, you can customize your default theme colors of Una UI.

Components and presets are based on a primary and gray colors, You can change the default value in your app.config.ts file.

You can use any color palette you want. Una UI uses Tailwind CSS Colors under the hood, But you can also define your own custom theme colors, see Extending Section.
primaryStringyellowPrimary color
grayStringstoneGray color
export default defineAppConfig({
  una: {
    primary: 'yellow',
    gray: 'stone'

Overriding and Extending

Extend or override presets in unocss.config.ts:

If you want to override the default Una UI presets, You can copy and change the default presets available here; just make sure you have the same name as the default presets.
import { defineConfig } from 'unocss'

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

export default defineConfig({
  shortcuts: [
      // Overrides the default `btn` preset with added `transition`, `delay`, and other styling properties.
       'btn': 'transition delay-1000 ease-in-out bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-semibold cursor-pointer',

      //  add more static presets here...

    // Overrides the `btn-solid` variant, removes `shadow-sm` .
    [/^btn-solid(-(\S+))?$/, ([, , c = 'primary']) => `btn-focus-${c} text-inverted bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`] 

    // add more dynamic presets here...