Vaadin Elements

Material design inspired UI components for building great web apps. For mobile and desktop.

Works on any HTML5 based stack.
Supports Polymer and Angular 2 data binding.

Core Elements v1.2.1

Vaadin Core elements is an Apache 2.0 licensed set of web components designed for business applications. The set contains elements like data grids, combo boxes and date pickers.

Free Apache 2.0 license See on GitHub

Polymer data table element for javascript

Grid

Vaadin Grid is a fully featured datagrid for showing table data. It performs great even with huge data sets.

Filtering select for polymer and javacript

Combo Box

Vaadin ComboBox is a filterable select element for situations where you have more than a few dozen items to select from.

Icons

Vaadin Icons is a set of 530 unique icons designed for web applications.

Upload

Vaadin upload allows you to upload multiple files with progress indication. Supports drag and drop and manual file selection.

Date Picker

Vaadin DatePicker allows you to select a date from a dropdown calendar.

Split Layout

Split Layout is a layout component that is split into resizeable areas.

Context Menu

Context Menu allows you to add a contextual menu to any element. The menu can be triggered by secondary click, long press or any other event.

Chat on Gitter

Discuss on forum

Charts 3.2

Vaadin Charts contains tens of different types of charts that allow you to visualize and interact with data. All charts support declarative and dynamic data binding.

Commercial license See more

Area Chart

Area chart highlights the area between a line chart and the axis. Areas can be on top of each other or stacked.

Area Range Chart

An area range chart highlights the area between two line charts.

Area Spline Chart

An area spline chart highlights the area between the axis and a curved line chart.

Area Spline Range Chart

An area spline range chart highlights the area between two spline charts.

Bar Chart

Display data with horizontal bars proportional to values. Bars can be grouped and stacked.

Box Plot Chart

Box plot charts are used to indicate variability outside upper and lower quartiles.

Bubble Chart

A bubble chart can be used to display three dimensions of data with disks proportional to a value at a given x, y point.

Candlestick Chart

A candlestick chart is a financial chart that combines a line chart and a bar chart.

Column Chart

Display data with vertical bars proportional to values. Bars can be grouped and stacked.

Column Range Chart

Displays two values per data point, highlighting the range between them.

Error Bar Chart

Error bars can be used to indicate error or uncertainty in measurements.

Flag Chart

A flag chart allows you to flag points on the timeline and axis.

Funnel Chart

Funnel charts are most often used to visualize the different stages in a company's sales process.

Gauge Chart

Displays a gauge where the angle corresponds to the value. Supports multiple axes.

Heat Map Chart

Highlight areas in a matrix with a gradient to easily compare large amounts of data.

Line Chart

Displays a series of data connected with straight lines.

Polymer open-high-low-close chart element

OHLC Chart

An open-high-low-close (OHLC) chart is a financial chart that shows the open, close, high and low values for a financial instrument for that day.

Pie Chart

Display proportions of values clearly with a pie chart.

Polygon Chart

Highlights an area defined by data points making up a polygon.

Pyramid Chart

Used to show hierarchically structured data in a pyramid shaped chart divided into vertical slices.

Scatter Chart

A scatter chart or scatter plot is a set of points from a two dimensional data set.

Solid Gauge Chart

A solid gauge chart shows a value as a colored angle of an arc.

Sparkline

Sparklines are small line charts that are displayed without axes or coordinates and are typically used to show time series data inline.

Spline Chart

Displays a set of data points connected by a curved line.

Tree Map Chart

Displays a set of hierarchical data in nested rectangles.

Waterfall Chart

A waterfall chart shows the cumulative effects of a step of sequentially applied positive or negative values.

Google Elements

Vaadin Elements are designed to work seamlessly together with all the elements in Polymer. Polymer includes an extensive set of Material Design components and components for integrating with Google products like Maps.

All Google Polymer Elements can also be used in Angular 2 projects using the Vaadin angular2-polymer directive.

Visit Polymer site