Material Design with Vaadin

The Vaadin 8 framework uses the excellent Valo theme, which can be used out-of-the-box or as the base for a custom theme. The (old school) themes for Vaadin 7 (reindeer, runo and chameleon) are still usable with the vaadin-compability-themes.jar.

During the last couple of weeks (June 2017) some interesting add-ons in the vaadin directory appeared to support Google’s material design language. Material design relies on “flat” card areas and a minimalistic (but professional) layout approach using shadows and animations to show what information is most important. As I am writing this post you can enhance your vaadin projects with

  • Material a theme that implements the material design language (based on the Valo theme)
  • Material Icons an add-on to use all material icons (by Google)
  • Material Design Stepper a component add-on to create a step-by-step process with material design


To use the material theme add-on just include the add-on in your project configuration pom.xml file



and use the @Theme annotation with the material theme in the UI class of your application.

public class MyApplicationUI extends UI {

If you want to create a custom theme based on material create the standard theme structure with a styles.scss file. This file should look like this (“demo” is the name of the custom theme):

$mat-background-color: #fafafa;  // #303030 for a dark theme
$v-focus-color: #00BCD4;

@import "../material/material.scss";
@import "addons.scss";

.demo {
  @include material;
  @include addons;


When creating your own theme based on material you can adjust colors and fonts with lots of variables. An overview of these variables is documented at .

vaadin buttons in material design
vaadin buttons in material design

Feel free to customize everything to your own needs and take a look at Google’s guide to colors for material design at   and .

Material Icons

Google offers a set of icons for their material design language at can use these icons with the fitting add-on


To create a button with a material design icon use code like

Button button = new Button(MaterialIcons.SENTIMENT_SATISFIED);
some material icons
some material icons

Material Design Stepper

To create a stepper component for workflows and “wizards” you can use the material design stepper add-on.


It can be used to create horizontal and vertical steppers with just a few lines of code:

Step step1 = new Step(true, "Caption", "Description", new Label("Content"));
Step step2 = new StepBuilder()
                 .withContent(new Label("Content"))
HorizontalStepper stepper = new HorizontalStepper(Arrays.asList(step1, step2), false);


a stepper component with material design
a stepper component with 4 steps – we are currently using step 1


By using these add-ons you are able to create good looking Vaadin application with the popular material design. Please try out all mentioned add-ons and support the developers for contributing their code to the community.

By Meik Kaufmann

I am a certified oracle enterprise architect and like to share my knowledge and experience that I gain in the projects I am working on.

Leave a Reply

Your email address will not be published. Required fields are marked *