@empathyds/vue

A comprehensive, agent-friendly Vue 3 design system based on shadcn-vue.

Installation

# npm
npm install @empathyds/vue

# pnpm
pnpm add @empathyds/vue

# yarn
yarn add @empathyds/vue

# bun
bun add @empathyds/vue

Setup

1. Import Styles

Import the pre-built CSS in your main entry file:

// main.ts
import '@empathyds/vue/style.css'

2. Use Components

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

<template>
  <Card>
    <CardHeader>
      <CardTitle>Welcome</CardTitle>
    </CardHeader>
    <CardContent>
      <Button>Get Started</Button>
    </CardContent>
  </Card>
</template>

Features

• 🎨 Opinionated Design - Beautiful, consistent styling out of the box
• 📦 60+ Components - Comprehensive component library
• 🔧 TypeScript - Full type safety and IntelliSense
• ♿ Accessible - Built with accessibility in mind using Reka UI
• 🎭 Blocks - Pre-built composite patterns (forms, layouts, etc.)

Components

Includes all standard UI components:

• Layout: Card, Separator, Resizable, Scroll Area
• Forms: Button, Input, Select, Checkbox, Radio, Switch, Slider
• Feedback: Alert, Dialog, Toast (Sonner), Progress, Spinner
• Navigation: Tabs, Breadcrumb, Pagination, Navigation Menu
• Data Display: Table, Avatar, Badge, Tooltip, Accordion
• Overlay: Popover, Dropdown Menu, Context Menu, Sheet, Drawer

Documentation

For full documentation and examples, visit: Empathy DS Docs

Repository

Bitbucket

License

MIT © Empathy DS