LX/UI

Powerful and flexible Vue.js 3 components and vanilla CSS styles library, originally developed for ZZ Dats and WNTR tech projects and products.

Features

• 🔤 Over 30 input and data display components;
• 🏗️ Various shell, layout and form building components;
• 🖼️ SVG icons library (including multiple styles and brand logos);
• 🛠️ Hooks and utils;
• 📘 UX guidelines;
• 📐 Responsive layouts;
• 🎨 Theming:
  • ☀️ Light user theme;
  • 🌙 Dark user theme;
  • 🔆 High Contrast user theme;
  • Various products branding themes;
• ♿ Accessibility features (WCAG, semantic web and APG);
• 🏆 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;

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());
…

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.

Develop

pnpm
pnpm dev

Read more about development in Development manual