# Vuestic UI — Open Source Vue 3 Component Library

> A fully accessible Vue 3 component library with 60+ configurable components designed for rapid development and easy maintenance.

## Install

Save in your project root:

# Vuestic UI — Open Source Vue 3 Component Library

## Quick Use
```bash
npm install vuestic-ui
# In your Vue 3 app:
# import { createVuestic } from 'vuestic-ui'
# import 'vuestic-ui/css'
# app.use(createVuestic())
```

## Introduction
Vuestic UI is a Vue 3 component library maintained by Epicmax that provides 60+ accessible, customisable components. It prioritises developer experience with TypeScript support, comprehensive documentation, and a flexible theming system.

## What Vuestic UI Does
- Delivers 60+ production-ready Vue 3 components including forms, tables, and navigation
- Supports global and per-component configuration without CSS overrides
- Provides an accessible-first design with ARIA attributes and keyboard navigation
- Offers CSS-variable-based theming for runtime colour and typography changes
- Includes tree-shaking support for importing only the components you use

## Architecture Overview
Vuestic UI uses the Vue 3 Composition API internally and exposes components as a Vue plugin. Theming is handled through CSS custom properties set by a configuration object, allowing runtime changes without recompilation. Each component accepts a preset prop for variant switching, and global presets define default behaviour.

## Self-Hosting & Configuration
- Install via npm and register the plugin with createVuestic()
- Configure global themes with colours, typography, and component presets
- Override component defaults globally or per-instance via props
- Use tree-shaking with named imports to reduce bundle size
- Works with Nuxt 3 via the official @vuestic/nuxt module

## Key Features
- CSS-variable-based theming with runtime colour switching
- Global configuration system that reduces per-component prop boilerplate
- Accessibility compliance with WCAG guidelines and keyboard navigation
- Responsive grid system and layout components
- TypeScript definitions for all components and configuration options

## Comparison with Similar Tools
- **Vuetify** — Material Design system with a larger footprint; Vuestic UI is lighter and design-agnostic
- **Element Plus** — enterprise-grade with its own design language; Vuestic UI is more flexible in styling
- **Naive UI** — TypeScript-first with a comprehensive API; Vuestic UI emphasises configuration over code
- **PrimeVue** — feature-rich with multiple theme options; Vuestic UI offers simpler runtime theming

## FAQ
**Q: Does Vuestic UI support Vue 2?**
A: No. Vuestic UI is built exclusively for Vue 3.

**Q: Can I change the theme at runtime?**
A: Yes. Themes use CSS custom properties that can be updated dynamically.

**Q: Is it accessible?**
A: Yes. Components follow WCAG guidelines with ARIA attributes and keyboard support.

**Q: Does it work with Nuxt 3?**
A: Yes. Use the official @vuestic/nuxt module for automatic component registration.

## Sources
- https://github.com/epicmaxco/vuestic-ui
- https://vuestic.dev

---
Source: https://tokrepo.com/en/workflows/asset-b38b3e53
Author: AI Open Source