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 (Claude Code, AmpCode, 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.

bash
pnpm add @empathyds/vue
bash
npm install @empathyds/vue
bash
yarn add @empathyds/vue

Setup ​

Import Styles ​

Add the Empathy DS stylesheet to your main entry file (e.g., main.ts):

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

// Import Empathy DS styles (Required)
import '@empathyds/vue/style.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.

Using with Tailwind CSS (Optional) ​

You do not need to install Tailwind CSS to use Empathy DS. The styles are self-contained.

However, if you want to use Tailwind utility classes in your own application code, you can install it alongside Empathy DS.

Important: Import Empathy DS styles before your Tailwind setup if possible, or ensure it's imported in your entry file.

ts
// main.ts
import '@empathyds/vue/style.css' // Import first (recommended)
import './assets/main.css'          // Your Tailwind imports

Empathy DS registers its tokens (like bg-primary, text-muted-foreground) so you can use them in your Tailwind classes automatically.

Use Components ​

Import and use any component:

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

<template>
  <Card>
    <CardHeader>
      <CardTitle>Welcome to Empathy DS</CardTitle>
    </CardHeader>
    <CardContent>
      <Button>Click me</Button>
    </CardContent>
  </Card>
</template>

Agent Integration ​

Empathy DS is optimized for AI coding agents.

For all agents (Antigravity, Cursor, Copilot, etc.):

Instruct your agent to use the following context file, which contains all necessary rules and component mappings:

https://empathyds.com/llms.txt

You can add this URL to your agent's context or system prompt.

Example System Prompt ​

text
You are using the Empathy DS component library.
Refer to https://empathyds.com/llms.txt for reliable component usage, imports, and styling rules.

Next Steps ​