Wing UI

A beautiful and reusable Vue 3 component library

✨ Features

• 🎨 Beautiful Design - Modern and clean UI components
• 🔧 TypeScript Support - Full TypeScript type definitions
• 📦 Tree Shakable - Only import what you need
• 🎯 Customizable - Easy to customize with CSS variables
• 🚀 Vue 3 - Built for Vue 3 with Composition API
• 📱 Responsive - Mobile-first responsive design
• ♿ Accessible - ARIA compliant components

📦 Installation

# npm
npm install @wing-ui/components

# pnpm
pnpm add @wing-ui/components

# yarn
yarn add @wing-ui/components

🚀 Quick Start

1. Import Styles

In your main.ts or main.js:

import { createApp } from 'vue'
import App from './App.vue'

// Import Wing UI styles
import '@wing-ui/components/dist/style.css'

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

2. Use Components

<script setup lang="ts">
import { Button, Badge, Modal, useToast } from '@wing-ui/components'
import { ref } from 'vue'

const showModal = ref(false)
const toast = useToast()

function handleClick() {
  toast.success('Button clicked!')
  showModal.value = true
}
</script>

<template>
  <div>
    <Button variant="primary" @click="handleClick">
      Click Me
      <Badge variant="success">New</Badge>
    </Button>

    <Modal
      :show="showModal"
      title="Hello Wing UI"
      @close="showModal = false"
    >
      <p>Welcome to Wing UI!</p>
    </Modal>

    <ToastContainer />
  </div>
</template>

📚 Components

Basic Components (7)

• Button - Versatile button component with 9 variants and 4 sizes
• Badge - Small status indicators with 6 variants
• Card - Container component with 4 variants
• Input - Text input with validation states
• Modal - Dialog component with 9 responsive sizes
• Slider - Range slider with value display
• Toast - Toast notifications with 4 types

Form Components (5)

• Chip - Tag/chip component with closable option
• Tooltip - Tooltip component with 4 positions
• Switch - Toggle switch with 3 sizes
• Checkbox - Checkbox with indeterminate state
• Radio - Radio button for single selection

Advanced Components (5) 🆕

• Alert - Alert messages with 4 types and closable option
• Dropdown - Dropdown menu with hover/click trigger
• Progress - Progress bar with striped and animated options
• Select - Select component with search and multi-select
• Tabs - Tab component with 3 variants (line, card, pill)

Coming Soon

• Popover
• Pagination
• Breadcrumb
• Spinner
• And more...

📖 Documentation

Button

<Button variant="primary" size="md" :loading="false">
  Click Me
</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'info' | 'link'
• size: 'xs' | 'sm' | 'md' | 'lg'
• loading: boolean
• disabled: boolean
• fullWidth: boolean

Badge

<Badge variant="success" size="md">
  New
</Badge>

Props:

• variant: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
• size: 'xs' | 'sm' | 'md' | 'lg'
• dot: boolean

Modal

<Modal
  :show="showModal"
  title="Modal Title"
  size="md"
  @close="showModal = false"
  @confirm="handleConfirm"
>
  Modal content
</Modal>

Props:

• show: boolean (required)
• title: string
• size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'full-width'
• hideHeader: boolean
• hideFooter: boolean
• closeOnClickOutside: boolean

Toast

<script setup>
import { useToast, ToastContainer } from '@wing-ui/components'

const toast = useToast()

function showNotification() {
  toast.success('Operation successful!')
  toast.error('Something went wrong!')
  toast.warning('Please check your input!')
  toast.info('This is an information message')
}
</script>

<template>
  <Button @click="showNotification">Show Toast</Button>
  <ToastContainer />
</template>

🎨 Customization

Wing UI uses CSS variables for easy customization. You can override these in your own CSS:

:root {
  --color-primary: #4338ca;
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #eab308;
  --color-info: #06b6d4;
  
  --radius-sm: 0.5rem;
  --radius-base: 0.75rem;
  --radius-lg: 1rem;
  
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License © 2024

🔗 Links

• Documentation
• GitHub
• npm