List of all available style classes of Vaadin components


Is it possible to get a list of all style classess of all Vaadin components. I am doing a custom theme for one of our clients and it is very hard to identify the complete list to customize.


see the attachment, in Vaadin7 it’s easy to custom the style by using SASS.

the vaadin7 default theme is
you can see the scss code source.

ex Button, vaadin-themes-7.1.0.jar\VAADIN\themes\reindeer\button

/* Standard implementation of the button theme

  • These files contain styles that apply to all browsers
    @import “button-standard.scss”;
    @import “button-primary-style.scss”;
    @import “button-small-style.scss”;
    @import “button-link-style.scss”;

@mixin reindeer-button(

$primaryStyleName : v-button

) {
// TODO use $exclude
@include reindeer-button-standard;
@include reindeer-button-primary-style;
@include reindeer-button-small-style;
@include reindeer-button-link-style;
[/code]The v-button is the Button default class, so you can find other component by this way.
And you can download the
to see the component list.

The complete list of components can be found in the packacke com.vaadin.ui; each of the components will have one to many associated stylenames. A complete list of stylenames doesn’t exist, as there isn’t really any use case to have one. Any theme you create will typically be for a subset of components (the ones you actually use), and will include a bunch of custom style names as well.

What even Vaadin developers themselves are doing when themeing an application is using the browser debug tools to find style names on the elements to style. This is normally much quicker than looking up styles elsewhere. Almost always a theme is developed for a single application or perhaps a group of applications, on top of one of the standard themes, and tuned and tested in the context of that application. Such themes very rarely include customization of components not used in the application.

If you are developing a complete theme that should work for any application, you’ll have a considerable amount of work ahead of you. In that case, look up forum posts on the topic by Jouni Koivuviita and study the standard themes carefully as a starting point. You might need to build on top of the base theme if you need to disable/remove styles that are in some other theme. With Vaadin 7.1, it is possible to mix and match theme parts by component from different standard themes and your own themes, but this often requires tweaking on the side of your theme - see also the
on themeing and SASS that touch on this issue.

Making more heavily customized themes might get easier with a new, more customizable standard (but perhaps not default) theme that is currently targeted for Vaadin 7.2.


Thanks for the info. I am currently using a Theme detector plugin on chrome to identify the exact div tag.