vuei-ux

A minimal, dynamic, and reusable Vue 3 UI component library for modern web apps. All components are plug-and-play, highly customizable, and designed for clean, minimal interfaces.

Table of Contents

• Installation
• Usage
• Components
• Advanced Usage
• Contributing
• Troubleshooting & FAQ
• License

Installation

npm install vuei-ux

Usage

Import components as needed:

import { Toast, Cookie, Carousel, SlideAnimation, HoverAnimation, Card, CustomButton, LoadingSpin, NavBar, ContactForm, FooterComponent, ScrollUpButton, Countdown, Tooltip, TestimonialSection, ColorToggle, FeatureGrid, HeroSectionTemplate } from 'vuei-ux';

Or import individually:

import Toast from 'vuei-ux/Toast.vue';

Register in your app:

app.component('Toast', Toast)

Components

Toast

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | message | String | '' | Toast message | | type | String | 'info' | Type: success, error, info, warn | | duration | Number | 3000 | Auto-close duration (ms) | | position | String | 'top' | Position: top, bottom, etc. | | showIcon | Boolean | true | Show icon |

Usage:

<Toast message="Saved!" type="success" />

Cookie

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | message | String | 'We use cookies.' | Consent message | | acceptText | String | 'Accept' | Accept button text | | declineText | String | 'Decline' | Decline button text |

Usage:

<Cookie message="We use cookies..." />

Carousel

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | items | Array | [] | Carousel items | | autoplay | Boolean | false | Autoplay carousel | | interval | Number | 3000 | Autoplay interval (ms) | | showArrows | Boolean | true | Show navigation arrows | | showDots | Boolean | true | Show navigation dots |

Usage:

<Carousel :items="carouselItems" autoplay />

SlideAnimation

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | direction | String | 'up' | Animation direction | | duration | Number | 600 | Animation duration (ms) | | delay | Number | 0 | Animation delay (ms) |

Usage:

<SlideAnimation direction="left"><div>Content</div></SlideAnimation>

HoverAnimation

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | effect | String | 'scale' | Hover effect type | | duration | Number | 300 | Animation duration (ms) |

Usage:

<HoverAnimation effect="scale"><img src="..." /></HoverAnimation>

Card

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | title | String | '' | Card title | | description | String | '' | Card description | | image | String | '' | Card image URL | | actions | Array | [] | Action buttons |

Usage:

<Card title="Feature" description="Details..." />

CustomButton

| Prop | Type | Default | Description | |---------|---------|-----------|-----------------------------------| | label | String | '' | Button label | | type | String | 'button' | Button type | | onClick | Func | () => {} | Click handler | | icon | String | '' | Icon name | | color | String | '' | Button color |

Usage:

<CustomButton label="Submit" @click="submitForm" />

LoadingSpin

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | size | Number | 32 | Spinner size (px) | | color | String | '#333' | Spinner color | | thickness | Number | 4 | Spinner thickness (px) |

Usage:

<LoadingSpin size="32" color="#333" />

NavBar

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | links | Array | [] | Navigation links | | logo | String | '' | Logo text or image | | align | String | 'left' | Link alignment | | mobileMenu | Boolean | true | Show mobile menu |

Usage:

<NavBar :links="navLinks" logo="AppLogo" />

ContactForm

| Prop | Type | Default | Description | |----------------|---------|-----------|-----------------------------------| | fields | Array | [] | Form fields | | onSubmit | Func | () => {} | Submit handler | | successMessage | String | 'Sent!' | Success message |

Usage:

<ContactForm :fields="formFields" @submit="handleSubmit" />

FooterComponent

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | links | Array | [] | Footer links | | social | Array | [] | Social icons | | copyright | String | '' | Copyright text |

Usage:

<FooterComponent :links="footerLinks" />

ScrollUpButton

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | icon | String | '' | Button icon | | color | String | '#333' | Button color | | showAfter | Number | 200 | Show after scroll (px) |

Usage:

<ScrollUpButton />

Countdown

| Prop | Type | Default | Description | |------------|---------|-----------|-----------------------------------| | duration | Number | 60 | Countdown duration (s) | | finishText | String | 'Done!' | Text after finish | | onFinish | Func | () => {} | Finish handler |

Usage:

<Countdown :duration="60" finishText="Done!" />

Tooltip

| Prop | Type | Default | Description | |----------|---------|-----------|-----------------------------------| | text | String | '' | Tooltip text | | position | String | 'top' | Tooltip position | | color | String | '#333' | Tooltip color |

Usage:

<Tooltip text="Info" position="top"><button>Hover</button></Tooltip>

TestimonialSection

| Prop | Type | Default | Description | |--------------|---------|-----------|-----------------------------------| | testimonials | Array | [] | Testimonial items | | title | String | '' | Section title | | layout | String | 'grid' | Layout type |

Usage:

<TestimonialSection :testimonials="reviews" />

ColorToggle

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | defaultDark | Boolean | false | Start in dark mode | | darkLabel | String | 'Dark' | Label for dark mode | | lightLabel | String | 'Light' | Label for light mode | | customClass | String | '' | Custom button class | | customStyle | Object | {} | Custom button style |

Usage:

<ColorToggle />

FeatureGrid

| Prop | Type | Default | Description | |------------|---------|-----------|-----------------------------------| | features | Array | [] | Feature items | | gridClass | String | 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3' | Grid layout classes | | customStyle| Object | {} | Custom grid style |

Usage:

<FeatureGrid :features="featureList" />

HeroSectionTemplate

| Prop | Type | Default | Description | |-----------|---------|-----------|-----------------------------------| | title | String | 'Welcome to Your App' | Hero title | | subtitle | String | 'A modern, minimal hero section for any project.' | Hero subtitle | | ctaText | String | 'Get Started' | CTA button text | | ctaClick | Func | () => {} | CTA button click handler | | customClass| String | '' | Custom section class | | customStyle| Object | {} | Custom section style |

Usage:

<HeroSectionTemplate title="Welcome!" subtitle="Build modern apps." ctaText="Get Started" />

BarChart

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | bars | Array | See below | Array of bar objects { label, value, color } | | title | String | 'Sample Bar Chart' | Chart title | | barColor | String | '#222' | Default bar color (black) | | barWidth | String | '40px' | Width of each bar | | showValues | Boolean | true | Show values below bars | | customClass | String | '' | Custom class for container | | customStyle | Object | {} | Custom style for container |

Default bars:

[
  { label: 'A', value: 40, color: '#222' },
  { label: 'B', value: 25, color: '#222' },
  { label: 'C', value: 60, color: '#222' },
  { label: 'D', value: 15, color: '#222' }
]

Usage:

<BarChart :bars="[{ label: 'X', value: 80 }, { label: 'Y', value: 20 }]" title="My Chart" />

RadarChart

| Prop | Type | Default | Description | |-------------|---------|-----------|-----------------------------------| | data | Array | [40,60,30,50,70] | Data values for axes | | labels | Array | ['A','B','C','D','E'] | Axis labels | | title | String | 'Sample Radar Chart' | Chart title | | size | Number | 300 | SVG size (px) | | levels | Number | 5 | Number of grid levels | | gridColor | String | '#222' | Grid color (black) | | areaColor | String | '#222' | Area fill color (black) | | pointColor | String | '#222' | Data point color (black) | | customClass | String | '' | Custom class for container | | customStyle | Object | {} | Custom style for container |

Usage:

<RadarChart :data="[80, 60, 90, 70, 50]" :labels="['Speed','Quality','Design','Support','Value']" title="Performance" />

Advanced Usage

• Use slots for custom content in most components.
• Pass custom classes/styles for full design control.
• Listen to events for interactivity.
• Compose components for complex layouts.

Contributing

1. Fork the repo and clone locally.
2. Create a new branch for your feature/fix.
3. Commit your changes and push.
4. Open a pull request with a clear description.

Troubleshooting & FAQ

• Build errors? Make sure you’re using Vue 3 and have all peer dependencies installed.
• Component not rendering? Check import paths and registration.
• Styling issues? Override with customClass/customStyle props.
• Need more features? Open an issue or contribute!

License

MIT