vm-ui

A themeable component library for Tailwind CSS v4 — CSS-first, built with oklch design tokens so every component adapts to light and dark mode automatically. No component framework required; a handful of components that need real interactivity (combobox, toast, carousel, dropdown, dialogs) ship with small, dependency-free vanilla-JS enhancers.

34 components: buttons, form controls (input, select, combobox, multiselect, checkbox, radio, switch, slider, textarea, rating), feedback (badge, toast, loading, tooltip), overlays (modal, drawer, dropdown), navigation (navbar, menu, breadcrumbs, pagination, steps, dock), data display (card, accordion, collapse, carousel), typography (link, prose), and layout (app-shell, hero, footer, FAB).

Install

npm install vm-ui

Requires Tailwind CSS v4 (tailwindcss@^4) as a peer dependency.

Usage

In your main CSS entry point:

@import "tailwindcss";
@import "vm-ui";

Build with the Tailwind CLI (or your existing v4 setup) as usual. Components that need JS import their script directly:

<script type="module" src="node_modules/vm-ui/src/js/combobox.js"></script>
<script type="module" src="node_modules/vm-ui/src/js/toast.js"></script>
<script type="module" src="node_modules/vm-ui/src/js/dialog.js"></script>
<script type="module" src="node_modules/vm-ui/src/js/carousel.js"></script>
<script type="module" src="node_modules/vm-ui/src/js/dropdown.js"></script>

(If you're using a bundler, import from vm-ui/js/combobox etc. instead of the raw node_modules path.)

Example

<button class="btn btn-primary">Primary</button>

<input class="input" placeholder="Email" />

<div class="rating">
  <label class="rating-star" for="r1">&#9733;</label>
  <input type="radio" id="r1" name="rating" class="rating-input" value="1" />
  <!-- ... -->
</div>

See the full component reference with live previews and copyable snippets in docs/index.html, or the working demo in demo/index.html.

Theming

Every color is a CSS variable defined per data-theme in src/theme/tokens.css:

[data-theme="light"] { --color-primary: oklch(58% 0.2 260); /* ... */ }
[data-theme="dark"]  { --color-primary: oklch(70% 0.18 260); /* ... */ }

Override the tokens or add your own data-theme value to reskin the whole library.

License

MIT