@man/vue-ds

A minimal, customizable Vue 3 design system with Tailwind CSS.

Installation

# Install from local directory
npm install ../vue-ds

# Install peer dependencies if not already installed
npm install vue@^3.4.0 tailwindcss@^3.4.0

Usage

1. Import and use components:

<script setup>
import { Button, Input, Card } from '@man/vue-ds';
</script>

<template>
  <Card>
    <Input v-model="email" placeholder="Enter email" />
    <Button variant="primary">Submit</Button>
  </Card>
</template>

2. Add the design system's Tailwind configuration to your tailwind.config.js:

import dsConfig from '@man/vue-ds/tailwind.config.js';

export default {
  ...dsConfig,
  // Your additional configuration
};

3. Import the base styles in your main CSS file:

@import '@man/vue-ds/src/style.css';

Available Components

• Accordion & AccordionItem
• Avatar
• Badge
• Breadcrumb & BreadcrumbItem
• Button
• Card
• Checkbox
• Dropdown
• Input
• Link
• List & ListItem
• Modal
• Pagination
• Select
• Tab & Tabs
• Tag
• Textarea
• Toggle
• Tooltip

TypeScript Support

All components include TypeScript type definitions.