npm package: @robuust-digital/vue-components
Description: A modern and customizable component library built with Vue 3 and Tailwind CSS
Author: Robuust Digital
Latest version: 2.4.0

# 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](#robuust-vue-3-components)
  - [🚀 Features](#-features)
  - [📚 Table of Contents](#-table-of-contents)
  - [Documentation](#documentation)
  - [Three-shaking](#three-shaking)
  - [MCP Server](#mcp-server)
  - [Getting Started](#getting-started)

## Documentation

📖 [**View Documentation**](https://robuust.github.io/vue-components/)

## 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`](./src/core) - The core component library
- [`@robuust-digital/vue-components/combobox`](./src/combobox) - `Combobox` component
- [`@robuust-digital/vue-components/dialogs`](./src/dialogs) - Headless UI components: `Drawer` and `Modal`
- [`@robuust-digital/vue-components/dropdown`](./src/dropdown) - Headless UI component: `Dropdown`
- [`@robuust-digital/vue-components/lightswitch`](./src/lightswitch) - Headless UI component: `Lightswitch`
- [`@robuust-digital/vue-components/toast`](./src/toast) - Headless UI component: `Toast`
- [`@robuust-digital/vue-components/rich-text-editor`](./src/rich-text-editor) - `RichTextEditor` component
- [`@robuust-digital/vue-components/tooltip`](./src/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.

```bash
# 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`](./mcp/README.md) for setup examples in Codex and Claude Desktop.

## Getting Started

**Clone the repository** and install dependencies:

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

To start developing the component library, follow these steps:

```bash
# 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
```