@robuust-digital/vue-components

A modern and customizable component library built with Vue 3 and Tailwind CSS
27,116
Install
npm install @robuust-digital/vue-components
Latest Version:3.5.0
Vue:3
Older releases:1 · 2
License:MIT
Last Updated:Oct 15, 2026
Links: npm
Maintainer: rutgerbakker95

Robuust Vue 3 Components

A modern and customizable component library built with Vue 3 and Tailwind 4 CSS, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.

🚀 Features

  • ✨ Vue 3 Components: Carefully crafted components that work seamlessly with Vue 3
  • 💎 Tailwind 4 CSS Integration: Leverage Tailwind CSS for styling, with full theme customization support
  • 🎨 Theming & Customization: Tailor components to your project’s branding directly from the tailwind.config.js
  • 🖖🏽 Accessibility First: Components are designed with accessibility in mind, ensuring compliance with best practices

📚 Table of Contents

Documentation

📖 View Documentation

Three-shaking

This library is built with Vue 3 and Tailwind 4 CSS, and is designed to be tree-shakable. This means that you can import only the components you need, and the rest will be excluded from your final bundle.

MCP Server

This repository includes an MCP server that exposes component docs and CSS variables for AI agents.

# Generate a JSON snapshot (optional, useful for CI checks)
yarn mcp:build-catalog

# Start the MCP server over stdio
yarn mcp:serve

See mcp/README.md for setup examples in Codex and Claude Desktop.

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/robuust/vue-components.git
cd vue-components
yarn install

To start developing the component library, follow these steps:

# Install dependencies
yarn install

# Start the development playground
yarn dev

# Build the component library
yarn build

# Run the documentation site locally
yarn docs:dev

# Build the documentation site
yarn docs:build

# Preview the documentation site
yarn docs:preview

# Run unit tests
yarn test:unit

# Lint all files
yarn lint

Configure component defaults

Create an rvc.config.ts file in the consuming project's root:

import { defineRvcConfig } from '@robuust-digital/vue-components/rvc-config';

export default defineRvcConfig({
  buttonBase: {
    color: 'secondary',
    size: 'sm',
  },
  pagination: {
    perPage: 25,
    perPageOptions: [10, 25, 50],
  },
});

Install the configuration in the Vue application:

import { createApp } from 'vue';
import Rvc from '@robuust-digital/vue-components/rvc-config';
import App from './App.vue';
import rvcConfig from '../rvc.config';

createApp(App)
  .use(Rvc, rvcConfig)
  .mount('#app');

Runtime-dependent values can use a top-level factory. The plugin evaluates it once during app.use:

import { defineRvcConfig } from '@robuust-digital/vue-components/rvc-config';
import i18n from './resources/js/plugins/i18n';

export default defineRvcConfig(() => ({
  dataTable: {
    fromLabel: i18n.global.t('pagination.from'),
  },
}));

Boolean props keep their component-level defaults and are not configurable through rvc-config. Pass Boolean props directly to components when needed.

Explicit component props take precedence over project configuration. Projects that do not install the plugin continue to use the existing package defaults. See the configuration documentation for all available defaults.

Version History

Version Released License
3.5.0 MIT
3.4.3 MIT
3.4.2 MIT
3.4.1 MIT
3.4.0 MIT
Pre-releases (39)
Version Released License
3.2.0-rc.3 MIT
3.2.0-rc.2 MIT
3.2.0-rc.1 MIT
2.5.0-beta.4 MIT
2.5.0-beta.3 MIT