Lumo

Vaadin Lumo Styles

Lumo is an evolving design system foundation for modern web applications, used by Vaadin Elements.

If you just want Lumo style UI components, you can use Vaadin Elements directly, such as vaadin-text-field, vaadin-button or vaadin-grid. You can install those using Bower as well.

Getting started

To start using the Lumo styles you need to install the vaadin-lumo-styles package using Bower.

Import and include the global style modules to make your application use Lumo styles:

Get to know the style guide, such as Typography and Colors, which affect the overall look and feel of all parts of the app.
Get to know the utilities, like Badges, which offer ready-made styles for small but common use cases.
Learn how to customize the styles to your needs. Remember to read about browser compatibility.