Aetos Design System

Design system built with Vue 3, shadcn-vue and Tailwind CSS 4.

🚀 Technologies Used

• Vue 3 - Progressive JavaScript framework
• TypeScript - Type-safe JavaScript
• Vite - Next generation frontend tooling
• Tailwind CSS 4 - Utility-first CSS framework
• shadcn-vue - High-quality Vue components built on Radix Vue

📦 Installation (Development)

# Install dependencies
pnpm install

🛠️ Development

# Run dev server
pnpm dev

# Build library for npm
pnpm build

# Preview production build
pnpm preview

📦 Using as NPM Package

Installation

npm install aetos-design-system
# or
pnpm add aetos-design-system
# or
yarn add aetos-design-system

Usage in your project

// main.ts or main.js
import { createApp } from 'vue'
import App from './App.vue'
// Import CSS from package
import 'aetos-design-system/style.css'

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

<script setup lang="ts">
// Import components from package
import { Button } from 'aetos-design-system'
import { cn } from 'aetos-design-system'
</script>

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>

📚 Documentation

• Vue 3 Documentation
• shadcn-vue Documentation
• Tailwind CSS Documentation
• Vite Documentation