@design-system/vue

Vue 3 component library for the design system with Composition API and <script setup>.

Installation

npm install @design-system/vue

Peer Dependencies

This package requires Vue 3:

npm install vue@^3.0.0

Usage

<script setup>
import { ButtonFilled, Card, InputField } from '@design-system/vue';
</script>

<template>
  <Card>
    <InputField placeholder="Enter text..." />
    <ButtonFilled>Submit</ButtonFilled>
  </Card>
</template>

Components

This library includes 28+ Vue 3 components with TypeScript support:

Button

• ButtonFilled, ButtonTonal, ButtonOutlined, ButtonGhost, ButtonLink, IconButton

Input

• InputField, TextareaField, SelectField, Checkbox, Radio, Switch, Slider

Display

• Card, Avatar, Badge

Feedback

• Toast, Alert, Dialog, Tooltip, Progress, Skeleton

Navigation

• Tabs, Accordion, Breadcrumb, Pagination, DropdownMenu

Layout

• Separator

Features

• ✅ Vue 3 Composition API with <script setup>
• ✅ Full TypeScript support with defineProps
• ✅ Scoped styles with CSS custom properties
• ✅ Reactive state management with ref, computed
• ✅ Works with @design-system/tokens for consistent design

Example

<script setup lang="ts">
import { ButtonFilled } from '@design-system/vue';
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <ButtonFilled @click="increment">
      Increment
    </ButtonFilled>
  </div>
</template>

TypeScript

All components are fully typed. Props are defined using TypeScript:

defineProps<{
  disabled?: boolean
  isLoading?: boolean
}>()

Styling

Components use CSS custom properties from @design-system/tokens:

background: hsl(var(--ds-dg-500));
color: hsl(var(--ds-gray-700));

Install tokens for consistent theming:

npm install @design-system/tokens

License

MIT