@vuecs/theme-bootstrap

The Bootstrap 5 theme for vuecs. Native Bootstrap classes (btn btn-primary, form-control, modal-content, …) for every vuecs component — drop vuecs into an existing Bootstrap app and it looks like it was always there. No Tailwind anywhere in the stack.

✨ What's inside

• 🅱️ Full component coverage — Bootstrap class mappings + variant matrices for every vuecs component family, with gap-fill structural CSS for patterns Bootstrap doesn't ship (stepper, switch sizing, sort indicators).
• 🌉 Design-token bridge — optional CSS (@import "@vuecs/theme-bootstrap") wiring Bootstrap's --bs-* variables onto --vc-color-*. Because Bootstrap 5 reads --bs-* at runtime, setColorPalette() re-tints native Bootstrap widgets too — live, no rebuild.
• 🌗 Dark mode wired in — declares a colorMode.handle hook that mirrors vuecs's resolved mode onto data-bs-theme, so Bootstrap 5.3+ chrome flips together with vuecs tokens (SSR-safe via @vuecs/nuxt).
• 🚫 Tailwind-free palette switching — pair with @vuecs/design/standalone for the full 22-palette catalog as plain CSS variables.

📦 Installation

npm install @vuecs/theme-bootstrap bootstrap

⚡ Usage

/* main.css */
@import "bootstrap/dist/css/bootstrap.css";
@import "@vuecs/design/standalone";
@import "@vuecs/theme-bootstrap";

import vuecs from '@vuecs/core';
import bootstrap from '@vuecs/theme-bootstrap';

app.use(vuecs, { themes: [bootstrap()] });

Renamed from @vuecs/theme-bootstrap-v5 in vuecs 3.0 (clean break, no shim). The former @vuecs/theme-bootstrap-v4 was removed — Bootstrap 4's Sass-compiled CSS can't benefit from the runtime token bridge.

📚 Documentation

Full reference: vuecs.dev/themes/bootstrap

License

Made with 💚

Published under Apache 2.0 License.