vuecs

Components that ship undesigned — structure, behavior, accessibility — and themes that supply the design: Tailwind, Bootstrap, Bulma, or your own. Build your own component library on the same machinery, and consumers restyle everything through one config.

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

🎨

Undesigned by default

Components ship structure, behavior, and a11y only — layered theme resolution with variants supplies the look.

🛠️

Multi-framework

Drop-in themes for Tailwind v4, Bootstrap 5, and Bulma 1.0+ — emitting each framework's native classes.

🔌

Build your own library

Publish components on the same machinery — consumers restyle your library and vuecs through one theme config.

🧩

Design tokens

22 palettes, 6 semantic scales, dark mode via .dark — switch palette at runtime, no rebuild.

🚀

Nuxt-ready

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

🔒

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' } },
    },
});