vuecs

Themeable Vue 3 component library with design tokens, runtime palette switching, and SSR-safe Nuxt integration.

Get Started View on GitHub

Primary palette

Neutral palette

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

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, Bootstrap v5, and Bootstrap v4. Mix and match with @vuecs/theme-font-awesome for icons.

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 v5

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

Bootstrap v4

Legacy Bootstrap 4 support for projects still on the older release line.

Bootstrap 4.x classes
design-token bridge for consumer-authored CSS
Bootstrap components themselves are Sass-compiled (limited reach)

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.

usePalette() — 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: {
        palette: { primary: 'green', neutral: 'zinc' },
        // colorMode: true (default) — set false to opt out
    },
});