LX/UI

Powerful and flexible Vue.js 3 components and vanilla CSS styles library, originally developed for various enterpise apps.

Focus on business logic, not boilerplate.

Features

• 🔤 50+ input, data display and container components;
• 🏗️ Declarative building tools;
• 🖼️ 350+ functional icons, 3 icon sets;
• 🖼️ 100+ branding logo icons;
• 🛠️ Hooks, stores and utils;
• 📘 UX guidelines;
• 📐 Responsive layouts;
• 🎨 Theming:
  • ☀️ Light user theme;
  • 🌙 Dark user theme;
  • 🔆 High Contrast user theme;
  • Various products branding themes;
• ♿ Accessibility:
  • Standards: WCAG, Semantic Web and APG;
  • Regulations: 🇱🇻 Ministru kabineta noteikumi Nr. 445, 🇪🇺 Directive 2019/882
• 🏆 Based on Carbon Design System;
• 🕵️ Updating HTML or CSS is not a requirement (but still an option) - components are declarative in nature and fit together like puzzle pieces;

Play around

Check out our 🌐 Demo and ℹ️ List of Components for live demo sandbox.

Read the docs

• ℹ️ Design Tokens
• ℹ️ Progressive Web App Guide
• 🌐 Forms
• 🌐 Colors
• 🌐 Icons
• 🌐 Utils

Declarative Tools

• 🏗️ LxFormBuilder
• 🏗️ LxViewBuilder
• 🛠️ LxFilterBuilder

Get

pnpm i -w '@wntr/lx-ui@latest'

For migration tips refer to ℹ️ Migration Guide

Use

install with pinia store:

import { createPinia } from 'pinia';
import { createLx } from '@wntr/lx-ui';
import App from '@/App.vue';
…
const myApp = createApp(App);
myApp.use(createPinia());
myApp.use(createLx());
…

Develop

pnpm
pnpm dev

Read more about development in ℹ️ Development manual

Vite Plugins

LX/UI now includes several Vite plugins to enhance your development experience and application security. These plugins are designed to seamlessly integrate with your Vite-based projects.

For detailed information on available plugins and their usage, please refer to our ℹ️ Vite Plugins Documentation.