@ist-group/commonui-components-vue

The Vue 3 half of the CommonUI design system — a Tailwind CSS 4 component library built on PrimeVue via a thin "Volt" wrapper layer. It is kept at feature parity with the React library and shares its design tokens and framework-agnostic code with components/shared.

Installation

npm install @ist-group/commonui-components-vue

PrimeVue is bundled through the Volt wrappers — you do not install it separately.

Usage

Import the design-token stylesheet once at your app entry, then use components directly:

// main.ts
import "@ist-group/commonui-components-vue/style.css";

<script setup lang="ts">
import { CuiButton } from "@ist-group/commonui-components-vue";
</script>

<template>
  <CuiButton variant="primary">Save</CuiButton>
</template>

Theming

The stylesheet ships a complete default theme — every --cui-* token with light and dark values inside the cui-theme CSS cascade layer. Layered declarations always lose to unlayered ones, so your app overrides any token with a plain declaration regardless of import order:

:root {
  --cui-surface-navigation: #0f172a;
}
[data-theme="dark"] {
  --cui-surface-navigation: #1e293b;
}

Architecture

Two layers: the Volt layer (src/volt/) restyles PrimeVue components with design tokens, and the component layer (src/components/) is the public API with typed props and JSDoc. A Cui component's runtime/keyboard behavior comes from the underlying PrimeVue component. See readme/WRAPPER_PATTERN.md for the full rationale.

Development

• Build: npm run build · Watch: npm run build:watch · Test: npm run test
• After JSDoc/prop changes: npm run extract-vue-docs (regenerates the docs API data)

Component authoring rules, styling constraints, and cross-framework parity guidance are in AGENTS.md. See also the repo-root README and docs/VUE.md.

License

MIT