vuecs

Vue 3 theming framework with shipped components. Design tokens, runtime palette + color-mode switching, SSR-safe Nuxt integration — plus an opt-in path for third-party libraries to compose their own components on the same theme system.

Get Started View on GitHub

Primary palette

Neutral palette

Click swatches to recolor every component on the page in real time — powered by setColorPalette().

Built for real apps

🎨

Themeable

Layered theme resolution with structured variants, compound variants, and runtime overrides.

🧩

Design tokens

22 Tailwind palettes, 6 semantic scales. Switch palette at runtime — no rebuild.

🌗

Dark mode

Tokens flip automatically under .dark — every component follows.

🚀

Nuxt-ready

SSR-safe color mode and palette via @vuecs/nuxt — zero FOUC on first paint.

🛠️

Multi-framework

Drop-in themes for Tailwind v4, Bootstrap v5, Bootstrap v4, Font Awesome.

🔒

TypeScript-first

Augmentable theme & defaults interfaces — autocomplete for component names and slot keys.

Pick your CSS framework

vuecs ships drop-in themes for Tailwind v4 and Bootstrap. Add icons through Iconify via @vuecs/icons-lucide, @vuecs/icons-font-awesome, or any other preset.

Tailwind

Native pairing for @vuecs/design — utility-first, JIT-compiled, dark-mode aware.

Tailwind v4 only
Semantic token utilities (bg-bg, text-fg, border-border)
twMerge-backed merge function pre-wired

Bootstrap

Drop-in Bootstrap 5 classes with optional design-token bridge for runtime palette switching.

Bootstrap 5.x classes
design-token bridge maps --bs-* → --vc-color-*
Repalettes Bootstrap components at runtime

From zero to first component

Three steps. Tailwind v4 + design tokens come pre-wired.

npm install @vuecs/core @vuecs/theme-tailwind @vuecs/design

@vuecs/nuxt

Built for Nuxt

SSR-safe palette and color-mode plumbing — server-rendered classes match the client on first paint, no flash, no hydration mismatch.

useColorPalette() — switch palettes at runtime
useColorMode() — VueUse-backed dark/light/system, cookie-driven
Auto-imports — composables, zero boilerplate
SSR plugins — palette and color-mode injected into <head> before paint

Read the Nuxt guide →

// nuxt.config.ts
export default defineNuxtConfig({
    modules: ['@vuecs/nuxt'],
    vuecs: {
        themes: ['@vuecs/theme-tailwind'],
        colorMode: { value: 'system' },
        colorPalette: { value: { primary: 'green', neutral: 'zinc' } },
    },
});