SurgeUI Design System
Modern Vue.js 3 component library with Composition API, designed to create modern and consistent interfaces.
📖 Documentation and examples
- Complete Documentation - Usage guide and component API
- Storybook - Interactive examples and component testing
- npm Package
✨ Features
- 🎨 Modern Design - Components with polished and professional design
- 🔧 TypeScript - Full TypeScript support for better developer experience
- 🎯 Composition API - Uses Vue 3 Composition API
- 📱 Responsive - Components adapted to all screen sizes
- 🌙 Dark Mode - Native dark mode support
- 🔄 RTL & LTR – Native support for both right-to-left and left-to-right text directions
- ♿ Accessibility – Accessibility-friendly and built with best practices in mind
- ⚡ Performance - Optimized for best performance
- ♿ Accessible - WCAG 2.1 AA compliant with complete accessibility support
- 🎨 Customizable - Global configuration and theming support
♿ Accessibility
All components follow WCAG 2.1 AA standards:
- Focus Management - Clear focus indicators and logical tab order
- Keyboard Navigation - Full keyboard support
- Screen Readers - Proper ARIA attributes and announcements
- Color Contrast - WCAG AA compliant contrast ratios (4.5:1 minimum)
- Touch Targets - Minimum 44px touch targets
- Reduced Motion - Respects
prefers-reduced-motion - High Contrast - Supports
prefers-contrast: high - RTL Support - Right-to-left language support
🚀 Quick Installation
bash
npm install @surgeui/ds-vuevue
<script setup>
import { SuButton } from '@surgeui/ds-vue'
import '@surgeui/ds-vue/style.css'
</script>
<template>
<SuButton variant="primary">
My first button
</SuButton>
</template>