@mcistudio/unoui-vue

@mcistudio/unoui-vue

An UnoCSS component library for Vue 3 admin applications.

Live demo · Repository

UnoUI provides common admin components for forms, data display, selection, and feedback overlays. It supports focused component imports, TypeScript types, semantic theme tokens, and light and dark themes.

Features

• Vue 3 Composition API with TypeScript types
• UnoCSS utilities and Iconify icons
• Light and dark themes controlled through data-theme
• Focused component subpath imports
• Compact controls for data-dense admin interfaces

Requirements

Installation

pnpm add @mcistudio/unoui-vue

Quick Start

Import the generated UnoCSS output and UnoUI component styles once in the application entry:

import { configureUnoUI } from '@mcistudio/unoui-vue/config'
import { createApp } from 'vue'

import App from './App.vue'

import 'virtual:uno.css'
import '@mcistudio/unoui-vue/style.css'

configureUnoUI({
  locale: 'en'
})

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

Enable the UnoUI preset and scan the compiled package entries in uno.config.ts:

import { readFileSync, readdirSync } from 'node:fs'
import { createRequire } from 'node:module'
import { dirname, resolve } from 'node:path'

import { defineConfig, transformerDirectives, transformerVariantGroup } from 'unocss'
import { presetUnoUI } from '@mcistudio/unoui-vue/uno'

const require = createRequire(import.meta.url)
const unoUIPackageDirectory = dirname(require.resolve('@mcistudio/unoui-vue/package.json'))
const unoUIDistDirectory = resolve(unoUIPackageDirectory, 'dist')
const unoUIContent = readdirSync(unoUIDistDirectory, { encoding: 'utf8', recursive: true })
  .filter((file) => file.endsWith('.js'))
  .map((file) => readFileSync(resolve(unoUIDistDirectory, file), 'utf8'))
  .join('\n')

export default defineConfig({
  presets: [presetUnoUI()],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  content: {
    inline: [unoUIContent],
    pipeline: {
      include: ['src/**/*.{vue,js,ts}']
    }
  }
})

Import components and types from focused subpaths:

import { Button } from '@mcistudio/unoui-vue/button'
import { Input } from '@mcistudio/unoui-vue/input'
import { Table, type TableColumn } from '@mcistudio/unoui-vue/table'

Themes

Set data-theme="dark" on the document root to enable the dark theme. The light theme is used when the attribute is absent.

Components

See the live demo for complete examples, API tables, and interaction states.