@anggiedimasta/ui
v4.0.0
Published
A modern, accessible Vue 3 UI component library with comprehensive documentation, testing, and design system built with Tailwind CSS
Maintainers
anggiedimastaReadme
@anggiedimasta/ui
A modern Vue 3 component library with a cyberpunk design system, built with TypeScript, Tailwind CSS, and Vite.
✨ Features
- Vue 3 Components: Built with Vue 3 Composition API and TypeScript
- Cyberpunk Design: High-contrast neon color palette with dark/light themes
- Tailwind CSS: Fully integrated with Tailwind CSS for styling
- TypeScript: Complete TypeScript support with type definitions
- Storybook: Interactive component documentation and testing
- Vitest: Comprehensive unit testing
- Accessible: WCAG compliant components with proper ARIA attributes
📦 Installation
npm install @anggiedimasta/ui🚀 Quick Start
1. Install the package
npm install @anggiedimasta/ui2. Import the styles
// In your main.ts or main.js
import '@anggiedimasta/ui/styles.css';3. Use components
<template>
<div>
<Button variant="primary">Click me</Button>
<Button variant="secondary">Secondary</Button>
</div>
</template>
<script setup lang="ts">
import { Button } from '@anggiedimasta/ui';
</script>🎨 Available Components
Button
A versatile button component with multiple variants and sizes.
<Button variant="primary" size="lg">
Primary Button
</Button>
<Button variant="secondary" size="sm">
Secondary Button
</Button>
<Button variant="destructive">
Delete
</Button>Props:
variant:'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline'size:'sm' | 'md' | 'lg'disabled:boolean
🎯 Design System
Color Palette
- Primary: Cyan neon (
hsl(180 100% 50%)) - Secondary: Magenta neon (
hsl(280 100% 50%)) - Accent: Green neon (
hsl(120 100% 50%)) - Destructive: Red (
hsl(0 85% 60%))
Theme Support
The library supports both light and dark themes with automatic switching:
<html class="dark">
<!-- Dark theme -->
</html>
<html>
<!-- Light theme -->
</html>🛠️ Development
Prerequisites
- Node.js 18+
- pnpm 8+
Setup
# Clone the repository
git clone https://github.com/anggiedimasta/ui.git
cd ui
# Install dependencies
pnpm install
# Start development server
pnpm devAvailable Scripts
pnpm dev: Start development serverpnpm build: Build all packagespnpm test: Run testspnpm storybook: Start Storybook locallypnpm lint: Run linting
📚 Storybook
View interactive component documentation locally:
pnpm storybookVisit: http://localhost:6006
🧪 Testing
Run the test suite:
pnpm testRun tests in watch mode:
pnpm test:watch📦 Package Structure
packages/ui/
├── src/
│ ├── components/ # Vue components
│ ├── composables/ # Vue composables
│ ├── styles.css # Main styles
│ └── index.ts # Package exports
├── stories/ # Storybook stories
├── tests/ # Unit tests
└── README.md # This file🎨 Customization
CSS Custom Properties
All design tokens are exposed as CSS custom properties:
:root {
--primary: hsl(180 100% 50%);
--secondary: hsl(280 100% 50%);
--accent: hsl(120 100% 50%);
/* ... more tokens */
}🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development Workflow
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Update documentation
- Submit a pull request
📄 License
MIT License - see the LICENSE file for details.
🔗 Links
🆘 Support
If you encounter any issues or have questions:
- Check the GitHub repository
- Search existing issues
- Create a new issue