Unified Components

Capabilities

General capabilities added through UnoCSS

• Variant groups
  • class="hover:(text-black underline)"
• Directives

  •   .custom-div {
        --at-apply: "text-center my-0 font-medium";
      }

  • @screen xs { ... }
  • @screen lt-lg { ... }
  • @screen at-lg { ... }
  • background-color: theme('colors.blue.500');
• Compile classes
  • <div class=":uno: text-center sm:text-left">...</div>
• Auto import access to all functions in the VueUse
• Auto import access to all functions in the Radash

How to use

1- Install

bun i unified-components --exact

2- Configure

~/uno.config.js

import { defineConfig, transformerCompileClass, transformerDirectives, transformerVariantGroup } from 'unocss';
import config from 'unified-components/uno.config.js';

export default defineConfig({
  presets: [
    config,
  ],
  transformers: [
    transformerVariantGroup(),
    transformerDirectives(),
    transformerCompileClass(),
  ],
});

~/nuxt.config.js

export default defineNuxtConfig({
  extends: [
    'unified-components',
  ],
});

~/app/app.vue

<style>
  :root {
    color: theme('colors.on-surface');
    background-color: theme('colors.surface');
  }
</style>

Theming

The theme is automatically applied to all components. You can override the theme by passing a theme object to the module.

~/nuxt.config.js

export default defineNuxtConfig({
  extends: [
    'unified-components',
  ],
  unifiedComponents: {
    theme: {
      'surface': '#FAFAFA',
      'on-surface': '#212121',
      'neutral': '#212121',
      'on-neutral': '#FAFAFA',
      'primary': '#3B82F6',
      'on-primary': '#FAFAFA',
      'success': '#22C55E',
      'on-success': '#212121',
      'danger': '#EF4444',
      'on-danger': '#212121',
    },
  },
});