@cui-universal/theme

CUI - Universal Cross-Framework UI Components

A high-performance, accessible, and themeable UI component system designed for Vue 3, Nuxt 4, React, and Next.js with 100% aesthetic and functional parity — combining the best developer experience of Nuxt UI and shadcn/ui.

🌟 Why CUI?

In modern full-stack web development, teams often work across multiple frameworks:

• Next.js / React for customer-facing web applications or dashboards
• Nuxt 4 / Vue for content hubs, internal tools, or high-performance SSR apps

Traditionally, you would need two separate design systems (e.g. shadcn/ui for React and nuxt/ui for Vue) resulting in design drift, mismatched props, and double the maintenance.

CUI solves this with a 3-tier architecture:

                        ┌────────────────────────┐
                        │      @cui-universal/theme        │
                        │  Design Tokens (HSL)   │
                        │  Tailwind CSS Preset   │
                        │  Shared Variants (tv)  │
                        └───────────┬────────────┘
                                    │
                 ┌──────────────────┴──────────────────┐
                 ▼                                     ▼
      ┌─────────────────────┐               ┌─────────────────────┐
      │     @cui-universal/react      │               │      @cui-universal/vue       │
      │  React 18 / 19      │               │  Vue 3 / Nuxt 4     │
      │  Next.js (App / SSR)│               │  SSR & Auto-imports │
      │  Custom Primitives  │               │  Custom Primitives  │
      └─────────────────────┘               └─────────────────────┘

📦 Monorepo Packages

🚀 Quickstart: React & Next.js

1. Install dependencies & Tailwind CSS

# pnpm
pnpm add @cui-universal/react @cui-universal/theme lucide-react
pnpm add -D tailwindcss postcss autoprefixer

# npm
npm install @cui-universal/react @cui-universal/theme lucide-react
npm install -D tailwindcss postcss autoprefixer

2. Configure Tailwind CSS

In tailwind.config.ts:

import type { Config } from "tailwindcss";
import { cuiTailwindPreset, cuiContent } from "@cui-universal/theme";

export default {
  presets: [cuiTailwindPreset],
  darkMode: ["class"],
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    ...cuiContent("react"),
  ],
} satisfies Config;

3. Setup CSS & Import Tokens

In your global stylesheet (app/globals.css or src/index.css):

@import "@cui-universal/theme/styles.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Use Components

import { Button, Dialog, DialogTrigger, DialogContent } from "@cui-universal/react";

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default">Open Modal</Button>
      </DialogTrigger>
      <DialogContent>
        <h2>Hello from Next.js & CUI!</h2>
      </DialogContent>
    </Dialog>
  );
}

⚡ Quickstart: Vue 3 & Nuxt 4

1. Install dependencies & Tailwind CSS

For Nuxt 4:

# pnpm
pnpm add @cui-universal/vue @cui-universal/theme
pnpm add -D @nuxtjs/tailwindcss @nuxt/icon nuxt

# npm
npm install @cui-universal/vue @cui-universal/theme
npm install -D @nuxtjs/tailwindcss @nuxt/icon nuxt

For Vue 3 (Vite):

# pnpm
pnpm add @cui-universal/vue @cui-universal/theme lucide-vue-next
pnpm add -D tailwindcss postcss autoprefixer

2. Configure Nuxt 4

In nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@cui-universal/vue/nuxt", // Auto-injects styles.css & registers all components
    "@nuxt/icon",             // Icon support
  ],
});

In tailwind.config.ts:

import type { Config } from "tailwindcss";
import { cuiTailwindPreset, cuiContent } from "@cui-universal/theme";

export default <Partial<Config>>{
  presets: [cuiTailwindPreset],
  darkMode: ["class"],
  content: [
    "./app/**/*.{vue,js,ts}",
    "./components/**/*.{vue,js,ts}",
    ...cuiContent("vue"),
  ],
};

3. Use Components in Nuxt 4 (Auto-Imported — No Imports Required!)

<!-- app/pages/index.vue -->
<template>
  <main class="p-8 max-w-xl mx-auto space-y-4">
    <Card>
      <CardHeader>
        <div class="flex items-center justify-between">
          <CardTitle>Welcome to Nuxt 4 + CUI</CardTitle>
          <Badge variant="secondary">Auto-imported</Badge>
        </div>
      </CardHeader>
      <CardContent class="space-y-4">
        <Button variant="primary" class="gap-2">
          <Icon name="lucide:sparkles" class="h-4 w-4" />
          <span>Get Started</span>
        </Button>
      </CardContent>
    </Card>
  </main>
</template>

🎨 Supported Components (22 Core Primitives)

🛠️ Development & Monorepo Workflow

Install dependencies

pnpm install

Build all packages

pnpm build

Run documentation playground

pnpm --filter docs dev
# Opens at http://localhost:3000

Adding a New Component

1. Define Variants: Add packages/theme/src/components/<name>.ts using tv() and export in packages/theme/src/index.ts.
2. React Implementation: Create packages/react/src/<Name>.tsx using the variants and CUI custom primitives.
3. Vue Implementation: Create packages/vue/src/<Name>.vue using the same variants and CUI custom primitives.
4. Rebuild: Run pnpm build.