Empathy DS

Appearance

Getting Started ​

Get up and running with Empathy DS in your Vue 3 project.

Installation ​

Copy and paste this prompt to your LLM agent (Antigravity, Claude Code, Cursor, etc.):

text
Install and configure Empathy DS by following the instructions here:
https://empathyds.com/getting-started

Or read the guide below directly—but we strongly recommend letting an agent handle it. Humans make mistakes.

1. Install Dependencies ​

bash
pnpm add @empathyds/vue
pnpm add -D tailwindcss @tailwindcss/vite
bash
npm install @empathyds/vue
npm install -D tailwindcss @tailwindcss/vite
bash
yarn add @empathyds/vue
yarn add -D tailwindcss @tailwindcss/vite

2. Configure Vite ​

Add the tailwindcss() plugin to your vite.config.ts:

ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

3. Configure Styles ​

Create or update your CSS entry file (e.g., src/assets/index.css) to import Tailwind:

css
@import "tailwindcss";

4. Import Styles in Main ​

Add the styles to your main entry file (e.g., main.ts). Important: Import Empathy DS styles before your custom styles/Tailwind.

ts
import { createApp } from 'vue'
import App from './App.vue'

// Import Empathy DS styles (Required)
import '@empathyds/vue/style.css'

// Import Tailwind
import './assets/index.css'

createApp(App).mount('#app')

That's it! The design system is now active with the opinionated color palette.

TIP

Empathy DS's design system is opinionated and works out of the box. No manual theme configuration is required.

Monorepo Installation ​

If you're using Empathy DS in a pnpm/npm/yarn workspace monorepo, follow these additional steps:

1. Install with Workspace Protocol ​

bash
pnpm add @empathyds/vue --filter your-app
bash
npm install @empathyds/vue -w your-app
bash
yarn workspace your-app add @empathyds/vue

2. Configure Vite Alias (if needed) ​

If your bundler can't resolve the package, add an alias in vite.config.ts:

ts
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@empathyds/vue': path.resolve(__dirname, 'node_modules/@empathyds/vue/dist/empathy-ds.es.js')
    }
  }
})

Use Components ​

Import and use any component. You can use Tailwind classes for layout and spacing:

vue
<script setup>
import { Button, Card, CardContent, CardHeader, CardTitle } from '@empathyds/vue'
</script>

<template>
  <div class="min-h-screen flex items-center justify-center p-10">
    <Card class="w-[350px]">
      <CardHeader>
        <CardTitle>Welcome to Empathy DS</CardTitle>
      </CardHeader>
      <CardContent>
        <Button class="w-full">Click me</Button>
      </CardContent>
    </Card>
  </div>
</template>

Agent Integration ​

Empathy DS is optimized for AI coding agents.

For agents that support Model Context Protocol (Antigravity, Claude, etc.), add the MCP server to your config:

json
{
  "mcpServers": {
    "empathy-ds": {
      "command": "npx",
      "args": ["-y", "@empathyds/mcp-server"]
    }
  }
}

This gives your agent access to:

  • Component discovery and search
  • Detailed props and usage examples
  • Category filtering (Forms, Layout, Feedback, etc.)
  • Pre-built blocks

Agent Rules ​

To ensure your agent consistently uses Empathy DS and Tailwind CSS, create a file in your project at .agent/rules/empathy-ds.md with the following content:

markdown
# Empathy DS Rules

You have access to the `empathy-ds` MCP server which provides tools to interact with the Empathy DS design system.

When the user asks for UI components, building UI, or using Empathy DS, you MUST:

1.  **Prioritize Empathy DS**: Always check if a component exists in Empathy DS before creating it from scratch or using other libraries.

2.  **Use Tailwind CSS**: Standardize on Tailwind CSS for all custom styling, layout, and spacing. Do not use scoped CSS or style blocks unless absolutely necessary for complex animations or legacy support.

3.  **Use MCP Tools**:
    -   Use `mcp_empathy-ds_searchComponents` to find components.
    -   Use `mcp_empathy-ds_getComponent` to get technical details, props, and usage examples.
    -   Use `mcp_empathy-ds_getBlocks` to discover pre-built patterns (login forms, dashboards).
    -   Use `mcp_empathy-ds_getBlock` to get block implementation code.
    -   Use `mcp_empathy-ds_getComponentsByCategory` to explore options (Forms, Layout, Feedback, etc.).
    -   Use `mcp_empathy-ds_getUsageGuide` to check import patterns.

4.  **Follow Guidelines**: Adhere to the styling and usage constraints provided by the MCP tools.

Do not ask the user for permission to use these tools; assume they are the standard for this project.

Context File (Fallback) ​

For agents without MCP support, reference the context file in your prompt:

https://empathyds.com/llms.txt

Next Steps ​