Vuestic UI — Open Source Vue 3 Component Library

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