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

• Robuust Vue 3 Components
  • 🚀 Features
  • 📚 Table of Contents
  • Documentation
  • Three-shaking
  • MCP Server
  • Getting Started
  • Configure component defaults

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.

• @robuust-digital/vue-components/core - The core component library
• @robuust-digital/vue-components/combobox - Combobox component
• @robuust-digital/vue-components/dialogs - Headless UI components: Drawer and Modal
• @robuust-digital/vue-components/dropdown - Headless UI component: Dropdown
• @robuust-digital/vue-components/lightswitch - Headless UI component: Lightswitch
• @robuust-digital/vue-components/toast - Headless UI component: Toast
• @robuust-digital/vue-components/rich-text-editor - RichTextEditor component
• @robuust-digital/vue-components/tooltip - Tooltip component with @floating-ui/vue

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.